PHP前端开发

微信小程序实现一个简单的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 来做。