微信小程序实现tab选项卡
接下来直接查看源码:
wxml
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--pages/detail/detail.wxml--> < 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 > < 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 > |
.wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* pages/detail/detail.wxss */ .swiper-tab{ width : 100% ; border-bottom : 2 rpx solid #ccc ; text-align : center ; height : 88 rpx; line-height : 88 rpx; display : flex; flex-flow: row; justify- content : space-between; } .swiper-tab-item{ width : 30% ; color : #434343 ; } .active{ color : #F65959 ; border-bottom : 4 rpx solid #F65959 ; } swiper{ text-align : center ; } |
.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// pages/detail/detail.js var app = getApp() Page({ data: { currentTab: 0 }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, //滑动切换 swiperTab: function (e) { var that = this ; that.setData({ currentTab: e.detail.current }); }, //点击切换 clickTab: function (e) { var that = this ; if ( this .data.currentTab === e.target.dataset.current) { return false ; } else { that.setData({ currentTab: e.target.dataset.current }) } } }) |