小程序顶部tabbar，随着内容左右滑动tabbar进行联动

今天药忘吃喽~ 2022-06-04 06:22 231阅读 0赞

自学小程序时看到京东app上的效果，突发奇想做出来的。 如下图展示，左右滑动的时候顶部tabbar可以进行联动

参考了该文章，进行了改进http://blog.csdn.net/qq\_31383345/article/details/52900835。

![Center][]![Image 1][]![Image 1][]![Center 1][]

直接上代码：

WXML：

<view class="swiper-tab">
    <view class="swiper-tab-list {
       {currentTab==0 ? 'on' : ''}}"data-current="0"bindtap="swichNav">1111</view>
    <view class="swiper-tab-list {
       {currentTab==1 ? 'on' : ''}}"data-current="1"bindtap="swichNav">2222</view>
    <view class="swiper-tab-list {
       {currentTab==2 ? 'on' : ''}}"data-current="2"bindtap="swichNav">3333</view>
    <view class="swiper-tab-list {
       {currentTab==3 ? 'on' : ''}}"data-current="3"bindtap="swichNav">4444</view>
    <view class="swiper-tab-list {
       {currentTab==4 ? 'on' : ''}}"data-current="4 "bindtap="swichNav">5555</view>
    <view class="swiper-tab-list {
       {currentTab==5 ? 'on' : ''}}"data-current="5"bindtap="swichNav">6666</view>
    <view class="swiper-tab-list {
       {currentTab==6 ? 'on' : ''}}"data-current="5"bindtap="swichNav">7777</view>
    <view class="swiper-tab-list {
       {currentTab==7 ? 'on' : ''}}"data-current="5"bindtap="swichNav">8888</view>
    </view>
    </scroll-view>
    <swipercurrent="{
       {currentTab}} "class="swiper-box "duration="300 "style="height:{
       {winHeight - 31}}px "bindchange="bindChange">
    
    <swiper-item>
    <view>11111</view>
    </swiper-item>
    
    <swiper-item>
    <view>22222</view>
    </swiper-item>
    
    <swiper-item>
    <view>33333</view>
    </swiper-item>
    <swiper-item>
    <view>44444</view>
    </swiper-item>
    <swiper-item>
    <view>55555</view>
    </swiper-item>
    <swiper-item>
    <view>66666</view>
    </swiper-item>
    <swiper-item>
    <view>77777</view>
    </swiper-item>
    <swiper-item>
    <view>88888</view>
    </swiper-item>
    </swiper>
    
    WXSS:
    .swiper-tab{ 
    text-align: center;
    line-height: 80rpx;} 
    .swiper-tab-list{ font-size: 30rpx;
    display: inline-block;
    width: 20%;
    color: #777777;
    } 
    .on{ color:#da7c0c;
    border-bottom: 5rpx solid#da7c0c;}
    .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
    .swiper-box view{
    text-align: center;
    }

**JS:**

//获取应用实例
    var app = getApp()
    Page({
    data: {
    // tabbar
    winWidth: 0,
    winHeight: 0,
    // tab切换
    currentTab: 0,
    scrollLeft: 0,
    },
    onLoad: function () {
    var that = this;
    /**
    * 获取系统信息
    */
    wx.getSystemInfo({
    success: function (res) {
    that.setData({
    winWidth: res.windowWidth,
    winHeight: res.windowHeight
    });
    }
    });
    },
    /**
    * 滑动切换tab
    */
    bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
    // 内容与tabbar的联动
    //这里的 2 75 是根据顶部tabbar的个数来决定的，我定义的是5个，2是索引，也就是说超过三页才会改变
    if (e.detail.current > 2) {
    var a = e.detail.current
    var query = wx.createSelectorQuery()
    query.select('.scrollBox').boundingClientRect(function (res) {
    var b = res.width
    that.setData({
    scrollLeft: (a - 2) * 75
    })
    })
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
    })
    } else {
    var a = e.detail.current
    this.setData({
    scrollLeft: 0
    })
    }
    
    },
    /**
    * 点击tab切换
    */
    swichNav: function (e) {
    var that = this;
    console.log(e.target)
    if (this.data.currentTab === e.target.dataset.current) {
    return false;
    } else {
    that.setData({
    currentTab: e.target.dataset.current
    })
    }
    },
    
    })

第一次写，请多多见谅

## 最新编辑补充: ##

无奈由于小程序swiper组件问题,无法自适应内容高度,所以左右滑动只适用于内容很少的情况下,

如果获取的动态数据过多,只能使用点击切换,下面放上我写的代码片段进行使用:

wechatide://minicode/7nqNnEms6yYq

使用方法:创建一个代码片段项目,导入代码片段链接就好 使用时直接复制到自己的项目中

[Center]: https://img-blog.csdn.net/20171206153819543?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvU25vd0JlYXRSYWlu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Image 1]: 
[Center 1]: /images/20220604/715ad30c68984086a4ed3e118048bb73.png