您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序怎樣實(shí)現(xiàn)一個簡單的Tab可滑動的切換方式,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
最近一直在做小程序項(xiàng)目,對于不同需求來說真是煩不勝煩,之前做的訂單頁來說只需要可點(diǎn)擊切換就可以,但是在后期的迭代中提到要求可滑動切換,下面我自己整理了一套比較簡單暴力的滑動切換方式,與大家共享一下,下面有效果圖。(菜鳥上路,不喜勿噴):
.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">代發(fā)貨</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>代發(fā)貨</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({ /** * 頁面的初始數(shù)據(jù) */ data: { currentTab: 0 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, //滑動切換 swiperTab: function (e) { this.setData({ currentTab: e.detail.current }); }, //點(diǎn)擊切換 clickTab: function (e) { if (this.data.currentTab === e.target.dataset.current) { return false; } else { this.setData({ currentTab: e.target.dataset.current }) } } })
效果圖:
在wxml部分其實(shí)可以用個wx:for 來做。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序怎樣實(shí)現(xiàn)一個簡單的Tab可滑動的切換方式”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。