微信小程序tab切換，可滑動切換，導航欄跟隨滾動實現

簡介

看到今日頭條小程序頁面能夠滑動切換，並且tab導航條也會跟着滾動，點擊tab導航，頁面滑動，切導航欄也會跟着滾動，就想着要怎麼實現這個功能

像商城類商品類目若是作成左右滑動切換類目用戶體驗應該會好不少，我這裏只是一個小demo，沒有怎麼去考慮數據的問題，主要是想着去實現這麼個功能，有可能後期引入數據後會出現問題，歡迎提出互相討論

解決過程

1.在想要實現這個問題的時候找了很多別人的博客看，主體頁面佈局方面是比較統一的，tab導航欄使用<scroll-view>標籤，內容使用<swiper>，其中的使用方法和參數但願自行參考api文檔，不過多解釋

佈局代碼以下：

wxml

 

<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>

 

wxss

/**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;
}

js

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

Page({
    data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        navData:[
            {
                text: '首頁'
            },
            {
                text: '健康'
            },
            {
                text: '情感'
            },
            {
                text: '職場'
            },
            {
                text: '育兒'
            },
            {
                text: '糾紛'
            },
            {
                text: '青蔥'
            },
            {
                text: '上課'
            },
            {
                text: '下課'
            }
        ],
        currentTab: 0,
        navScrollLeft: 0
    },
    //事件處理函數
    onLoad: function () {
        if (app.globalData.userInfo) {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        } else if (this.data.canIUse) {
            // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
            // 因此此處加入 callback 以防止這種狀況
            app.userInfoReadyCallback = res => {
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true
                })
            }
        } else {
            // 在沒有 open-type=getUserInfo 版本的兼容處理
            wx.getUserInfo({
                success: res => {
                    app.globalData.userInfo = res.userInfo
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    })
                }
            })
        }


        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
        });
    }
})

頁面代碼如上面三部分，能夠直接新建一項目進行測試

效果圖以下

注意事項

在處理頂部tab導航跟隨底部頁面滑動的時候遇到一個問題，就是在給<scroll-view>中的scrll-left賦值的時候遇到的問題

邏輯上講初始時tab導航下標小於2時導航欄不滾動，當大於2時向左滑動，以使被選中的導航欄居中，可是當最左側的選項由於左滑看不到後，我又點擊左側選項但願導航往右滑動，可以看到左邊的導航，按上面的js代碼計算scroll-left會產生負值，可是scroll-left即便爲負值，可是滾動條不會向左縮進去，因此即便爲負值，至關於爲0，當時作的時候一直在思考這個怎麼用邏輯解決，想着要寫各類判斷，計算距離，結果到最後一句代碼直接賦值就搞定了，也是很無語。

小結

以上只是測試demo，可作參考，若有同窗經過這個demo引入數據而且成功的話或者失敗的話，歡迎溝通探討！！！

 

 

案例二：

小程序商品展現須要導航欄的商品分類進行滑動

效果圖：

 

 

 

 

首先是滑動的效果：

<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
</scroll-view>
 小程序使用</scroll-view>,橫向移動便可

 

WXML:這裏面我將導航欄顯示類目定義爲5個，每一個20%,當超出5個分類，也就是index>4的時候，導航欄下面的省略號加上（由於tab-nac的border-bottom只能顯示到第五個分類）

 

<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
<!-- tab -->
<view class="tab">
<view class="tab-nav" style='font-size:12px'>
<view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;
{{index>4?'border-bottom: 1rpx dotted #ddd;':''}}">{{item.text}}</view>
<view >
<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
</view>
</view>
</view>
</scroll-view>
wXSS:

 

 

.tab{
display: flex;
flex-direction: column;
}
.tab-nav{
height: 80rpx;
background: #fff;
border-bottom: 0.5rpx dotted #ddd;
display: flex;
line-height: 79rpx;
position: relative;
}

.tab-line{
position: absolute;
left: 0;
bottom: -1rpx;
height: 4rpx;
background: #f7982a;
transition: all 0.3s;
}
.tab-content{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}

JS：

 

 

import util from './../../utils/util.js';Page({ data: { showtab: 0, //頂部選項卡索引 tabnav: { tabnum: 5, tabitem: [ { "id": 0, "text": "商品分類1" }, { "id": 1, "text": "商品分類2" }, { "id": 2, "text": "商品分類3" }, { "id": 3, "text": "商品分類4" }, { "id": 4, "text": "商品分類5" }, { "id": 5, "text": "商品分類6" }, { "id": 6, "text": "商品分類7" } ] }, productList: [], }, onLoad: function () { }, setTab: function (e) { const edata = e.currentTarget.dataset; this.setData({ showtab: edata.tabindex, }) },}) --------------------- 做者：皮蛋小粥 來源：CSDN 原文：https://blog.csdn.net/qq442270636/article/details/79084685 版權聲明：本文爲博主原創文章，轉載請附上博文連接！