微信小程序实现一个简单的Tab可滑动的切换方式（代码）

百变鹏仔 6天前 #前端问答

文章标签代码

本篇文章给大家带来的内容是关于微信小程序实现一个简单的Tab可滑动的切换方式（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近一直在做小程序项目，对于不同需求来说真是烦不胜烦，之前做的订单页来说只需要可点击切换就可以，但是在后期的迭代中提到要求可滑动切换，下面我自己整理了一套比较简单暴力的滑动切换方式，与大家共享一下，下面有效果图。（菜鸟上路，不喜勿喷）：

.wxml

<!--pages/mine/order/order.wxml--><view>  <view>    <view>代付款</view>    <view>代发货</view>    <view>待收货</view>    <view>待评价</view>    <view>退款/售后</view>  </view>  <swiper>    <swiper-item>      <view>代付款</view>    </swiper-item>    <swiper-item>      <view>代发货</view>    </swiper-item>    <swiper-item>      <view>待收货</view>    </swiper-item>    <swiper-item>      <view>待评价</view>    </swiper-item>    <swiper-item>      <view>退款/售后</view>    </swiper-item>  </swiper></view>

.wxss

/* pages/mine/order/order.wxss */.swiper-tab {    width: 100%;    border-bottom: 2rpx solid #ccc;    text-align: center;    height: 88rpx;    line-height: 88rpx;    display: flex;    flex-flow: row;    justify-content: space-between;}.swiper-tab-item {    width: 30%;    color: #434343;    font-size: 28rpx;}.active {    color: #f65959;    border-bottom: 4rpx solid #f65959;}swiper {    text-align: center;    background-color: #fff}

.js

// pages/mine/order/order.jsPage({  /**   * 页面的初始数据   */  data: {    currentTab: 0  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    },  //滑动切换  swiperTab: function (e) {    this.setData({      currentTab: e.detail.current    });  },  //点击切换  clickTab: function (e) {    if (this.data.currentTab === e.target.dataset.current) {      return false;    } else {      this.setData({        currentTab: e.target.dataset.current      })    }  }  })

效果图：

在wxml部分其实可以用个wx:for 来做。

文章推荐

微信小程序实现一个简单的Tab可滑动的切换方式（代码）

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）