微信小程序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{
     100%;
    height: 100%;
}
.container{
     100%;
    height: 100%;
}
.nav {
    height: 80rpx;
     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 {
     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=" 100%;white-space:nowrap;">
</scroll-view>
 小程序使用</scroll-view>,横向移动即可

WXML:这里面我将导航栏显示类目定义为5个，每个20%,当超出5个分类，也就是index>4的时候，导航栏下面的省略号加上（因为tab-nac的border-bottom只能显示到第五个分类）

<scroll-view scroll-x="true" style=" 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-20%;max-20%;text-align:center;height: 80rpx;
{{index>4?'border-bottom: 1rpx dotted #ddd;':''}}">{{item.text}}</view>
<view >
<view class="tab-line" style="{{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
版权声明：本文为博主原创文章，转载请附上博文链接！