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

桃扇骨 2023-02-10 05:22 4阅读 0赞

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

![20200520152402307.png][]

![20200520152409677.png][]

很简单

wxml

<swiper class="tabs-nav">
            <swiper-item wx:for="{
       {tabs}}" wx:key="index">
              <view class="navigation">
                <block wx:for="{
       {tabs[index]}}" wx:key="num" bindtap="signInShow">
                  <view class="nav-bottom" data-index="{
       {index}}" bindtap="chooseMenu">
                    <image class="nav-icon" src="{
       {item.tabBtn}}"></image>
                    <text class="navigation-size" data-title="{
       {item.title}}">{
       {item.title}}</text>
                  </view>
                </block>
              </view>
              
            </swiper-item>
          </swiper>

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       开发交流群

[20200520152402307.png]: https://img-blog.csdnimg.cn/20200520152402307.png
[20200520152409677.png]: https://img-blog.csdnimg.cn/20200520152409677.png