微信小程序：使用swiper与scroll-view实现tab选项卡（2）

最新推荐文章于 2025-08-02 09:55:39 发布

mkmin

最新推荐文章于 2025-08-02 09:55:39 发布

阅读量5.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序微信小程序文章标签：微信小程序前端界面微信 javascript

本文链接：https://blog.youkuaiyun.com/hushilin001/article/details/78750183

微信小程序同时被 2 个专栏收录

40 篇文章

订阅专栏

微信小程序

31 篇文章

订阅专栏

本文介绍了一个使用swiper组件实现多于三个Tab切换的示例代码，通过自定义样式和逻辑处理，实现了平滑的切换效果，并提供了完整的WXML和JS代码。

前阵子。一个同事说在实现选项卡的时候，使用swiper的话是无法实现三个以上的tab的，我听着有点懵，可能是他觉得我用控制自动滚动来实现有点问题，就从第三个页面滚动会第一个页面的是顺序是3》4》5》6》1》，而不是正常情况下的3》2》1，所以他觉得应该使用tab来实现。

我个人感觉有不同的方法是很好的，有思维的碰撞也是很棒的。但是有点不服气。所以就直接给了他另外一个demo，现在也上传上来：

界面：

<view>点击下方文字切换</view>
<scroll-view scroll-x style="height:70rpx;width:750rpx;overflow:scroll;" scroll-left="{{scroll_left}}">
  <view style="width:{{tab_tite_data.length*t_width}}rpx;">
    <view wx:for="{{tab_tite_data}}" style="height:100rpx;width:{{t_width}}rpx;margin-bottom:10rpx;display:inline-block;">
      <view bindtap='changeview' style="width:100%;height:60rpx;text-align:center;font-size:30rpx;line-height:60rpx;background:{{item.color}};color:#ffffff;display:inline-block;" data-current="{{index}}">{{item.name}}</view>
      <view style="display:{{c_index==index?'block':'none'}}; width:{{t_width/3}}rpx;text-align:center;margin-left:{{t_width/3}}rpx;background:#000000;height:2rpx;"></view>
    </view>
  </view>
</scroll-view>
<swiper bindchange='get_index' current="{{c_index}}">
  <swiper-item wx:for="{{tab_tite_data}}" style="width:750rpx;height:150rpx;">
    <view style="background:{{item.color}};height:150px;">{{item.name}}</view>
  </swiper-item>
</swiper>

js：

Page({
  data: {
    c_index: 0,//当前
    s3_width: 0,
    t_width: 250,//上方每个tab的大小
    scroll_left: 0,//上方滚动的位置
    t_margin_left: 0,//上方的margin-left
    tab_tite_data: [
      { "name": "1", "color": "orange", }
      , { "name": "2", "color": "blue", }
      , { "name": "3", "color": "green", }
      , { "name": "4", "color": "yellow", }
      , { "name": "5", "color": "black", }
      , { "name": "6", "color": "pink", }
    ],
  },
  onShow: function () {
    this.getwidth();
  },
  //滑
  get_index: function (e) {
    var crash_current = e.detail.current;
    var s = 0;
    if (crash_current != 0 && crash_current != 1) {
      s = parseInt(crash_current - 1) * this.data.s3_width;
    }
    this.setData({
      c_index: e.detail.current,
      scroll_left: s
    });
  },
  //点
  changeview: function (e) {
    var crash_current = e.currentTarget.dataset.current;
    var s = 0;
    if (crash_current != 0 && crash_current != 1) {
      s = parseInt(crash_current - 1) * this.data.s3_width;
    }
    this.setData({
      c_index: e.currentTarget.dataset.current,
      scroll_left: s
    });
  },
  getwidth: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData(that.data.s3_width = res.windowWidth / 3);
      },
    })
  }
})

就这两个界面。直接复制粘贴就可以看到效果了