微信小程式之簡單暴力的Tab可滑動切換方式
阿新 • • 發佈:2018-12-27
最近一直在做小程式專案,對於不同需求來說真是煩不勝煩,之前做的訂單頁來說只需要可點選切換就可以,但是在後期的迭代中提到要求可滑動切換,下面我自己整理了一套比較簡單暴力的滑動切換方式,與大家共享一下,下面有效果圖。(菜鳥上路,不喜勿噴):
.wxml
<!--pages/mine/order/order.wxml--> <view class='order'> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">代付款</view> <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">代發貨</view> <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收貨</view> <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">待評價</view> <view class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">退款/售後</view> </view> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <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.js Page({ /** * 頁面的初始資料 */ 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 來做的但是本人太懶了,就先將就著用吧!如果你有更好的方法可以在下面留言告訴我!