微信小程序使用swiper制作左右滑动tabs导航

首先我们先来看一下效果吧

很简单

wxml

      
        
          
            
              
                
                {
    {item.title}}
              
            
          
          
        
      
      

wxss

/* tabs-nav */
.tabs-nav {
  width: 100%; 
  height: 442rpx;
  background: #ffffff;
  border-radius: 10rpx;
}
.navigation {
  padding: 44rpx 15rpx 2rpx;
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
.navigation .nav-bottom {
  margin-bottom: 42rpx;
  display: flex;
	flex-direction: column;
	align-items: center;
	width: 120rpx; 
}
.nav-icon {
  width:100rpx; 
  height:100rpx
}
.navigation .navigation-size {
	font-size: 35rpx;
  margin-top: 16rpx;
  color: #000
}

最后一部分,js,主要看数据结构

tabs: [
      [{
          title: "体验",
          tabBtn: "../../img/tabs/tabs_1.png"
        },
        {
          title: "秒杀",
          tabBtn: "../../img/tabs/tabs_2.png"
        },
        {
          title: "兑换",
          tabBtn: "../../img/tabs/tabs_3.png"
        },
        {
          title: "拼团",
          tabBtn: "../../img/tabs/tabs_4.png"
        },
        {
          title: "乐购",
          tabBtn: "../../img/tabs/tabs_5.png"
        },
        {
          title: "签到",
          tabBtn: "../../img/tabs/tabs_6.png"
        },
        {
          title: "店铺街",
          tabBtn: "../../img/tabs/tabs_7.png"
        },
        {
          title: "社区",
          tabBtn: "../../img/tabs/tabs_8.png"
        },
        {
          title: "星球",
          tabBtn: "../../img/tabs/tabs_9.png"
        },
        {
          title: "邀请",
          tabBtn: "../../img/tabs/tabs_10.png"
        }
      ],
       [{
          title: "体验",
          tabBtn: "../../img/tabs/tabs_1.png"
        },
        {
          title: "秒杀",
          tabBtn: "../../img/tabs/tabs_2.png"
        },
        {
          title: "兑换",
          tabBtn: "../../img/tabs/tabs_3.png"
        },
        {
          title: "拼团",
          tabBtn: "../../img/tabs/tabs_4.png"
        },
        {
          title: "乐购",
          tabBtn: "../../img/tabs/tabs_5.png"
        },
        {
          title: "签到",
          tabBtn: "../../img/tabs/tabs_6.png"
        },
        {
          title: "店铺街",
          tabBtn: "../../img/tabs/tabs_7.png"
        },
        {
          title: "社区",
          tabBtn: "../../img/tabs/tabs_8.png"
        },
        {
          title: "星球",
          tabBtn: "../../img/tabs/tabs_9.png"
        },
        {
          title: "邀请",
          tabBtn: "../../img/tabs/tabs_10.png"
        }
      ]
    ],

以上就是效果的所有代码

最后加上点击事件吧

// 按钮菜单点击
  chooseMenu: function(e) {
    var index = e.currentTarget.dataset.index;
    if (index == 0) {
      wx.navigateTo({
        url: '../commodity/commodity-experience-list/index',
      })
    }
    if (index == 1) {
      wx.navigateTo({
        url: '../commodity/commodity-tesco-list/index',
      })
    }
    if (index == 2) {
      wx.navigateTo({
        url: '../commodity/commodity-exchange-list/index',
      })
    }
    if (index == 3) {
      wx.navigateTo({
        url: '../commodity/commodity-time-limit/index',
      })
    }
    if (index == 4) {
      wx.navigateTo({
        url: '../commodity/commodity-share-the-bill-list/index',
      })
    }
    if(index == 5) {
      // 每日签到隐藏
      this.setData({
        signInFrame: true,
      })
    }
    if (index == 6) {
      wx.navigateTo({
        url: '../my/my-generalize/index',
      })
    }
    if (index == 7) {
      wx.navigateTo({
        url: '../commodity/commodity-exclusive-list/index',
      })
    }
    if (index == 8) {
      wx.navigateTo({
        url: '../shop/shop-list/index',
      })
    }
    if (index == 9) {
      wx.switchTab({
        url: '../commodity/goods-category/index',
      })
    }
  },

以上就是今日所有内容了

如果对你有帮助,请加一下QQ群: 1102727334       开发交流群