微信小程序实现一个简单的Tab可滑动的切换方式(代码)
程序员文章站
2022-04-19 15:11:57
...
本篇文章给大家带来的内容是关于微信小程序实现一个简单的Tab可滑动的切换方式(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近一直在做小程序项目,对于不同需求来说真是烦不胜烦,之前做的订单页来说只需要可点击切换就可以,但是在后期的迭代中提到要求可滑动切换,下面我自己整理了一套比较简单暴力的滑动切换方式,与大家共享一下,下面有效果图。(菜鸟上路,不喜勿喷):
.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 来做。
相关推荐:
微信小程序实例:轮播图的代码实现与分析
以上就是微信小程序实现一个简单的Tab可滑动的切换方式(代码)的详细内容,更多请关注其它相关文章!