小程序tab欄可滑動,可點擊居中demo

效果圖:

 

 

代碼:

 

<view class="container">
    <!-- tab導航欄 -->
    <!-- scroll-left屬性可以控制滾動條位置 -->
    <!-- scroll-with-animation滾動添加動畫過渡 -->
    <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
        <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
            <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
        </block>        
    </scroll-view>
    <!-- 頁面內容 -->
    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">        
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
            {{tabItem}}
        </swiper-item>
    </swiper>
</view>

 

/**index.wxss**/
page{
    width: 100%;
    height: 100%;
}
.container{
    width: 100%;
    height: 100%;
}
.nav {
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80rpx;
    background: #f7f7f7;
    font-size: 16px;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.nav-item {
    width: 20%;
    display: inline-block;
    text-align: center;
}
.nav-item.active{
    color: red;
}
.tab-box{
    background: greenyellow;
    padding-top: 80rpx;
    height: 100%;
    box-sizing: border-box;
}
.tab-content{
    overflow-y: scroll;
}

//index.js
//獲取應用實例
const app = getApp()

Page({
    data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        navData:[
            {
                text: '首頁'
            },
            {
                text: '健康'
            },
            {
                text: '情感'
            },
            {
                text: '職場'
            },
            {
                text: '育兒'
            },
            {
                text: '糾紛'
            },
            {
                text: '青蔥'
            },
            {
                text: '上課'
            },
            {
                text: '下課'
            }
        ],
        currentTab: 0,
        navScrollLeft: 0
    },
    //事件處理函數
    onLoad: function () {
        wx.getSystemInfo({
            success: (res) => {
                this.setData({
                    pixelRatio: res.pixelRatio,
                    windowHeight: res.windowHeight,
                    windowWidth: res.windowWidth
                })
            },
        })       
    },
    switchNav(event){
        var cur = event.currentTarget.dataset.current; 
        //每個tab選項寬度占1/5
        var singleNavWidth = this.data.windowWidth / 5;
        //tab選項居中                            
        this.setData({
            navScrollLeft: (cur - 2) * singleNavWidth
        })      
        if (this.data.currentTab == cur) {
            return false;
        } else {
            this.setData({
                currentTab: cur
            })
        }
    },
    switchTab(event){
        var cur = event.detail.current;
        var singleNavWidth = this.data.windowWidth / 5;
        this.setData({
            currentTab: cur,
            navScrollLeft: (cur - 2) * singleNavWidth
        });
    }
})

 

感謝 各位老板  小額打賞:   (有問題call俺)

 

              

 

 

 

 

 原文 鏈接:https://www.cnblogs.com/till-the-end/p/8935152.html