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

最新推荐文章于 2024-05-23 18:27:52 发布

coldriversnow

最新推荐文章于 2024-05-23 18:27:52 发布

阅读量785

点赞数

文章标签：微信小程序小程序

原文链接：https://blog.51cto.com/u_15803377/5704889

版权

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

wxml

<!-- 组合按钮导航 S -->
      <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>
          <!-- 按钮导航 E -->
        </swiper-item>
      </swiper>
      <!-- 组合按钮导航 E -->

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',
      })
    }
  },

转载：微信小程序使用swiper制作左右滑动tabs导航_wx632c389d20748的技术博客_51CTO博客