好久没有写东西了 今天写一个简单的东西
小程序tab切换 (选项卡功能)
.wxml
<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?‘active‘:‘‘}}" data-current="0" bindtap="clickTab">111</view> <view class="swiper-tab-item {{currentTab==1?‘active‘:‘‘}}" data-current="1" bindtap="clickTab">222</view> </view> <swiper current="{{currentTab}}" bindchange="swiperTab" style="height:{{swiperHeight}}rpx;"> <swiper-item> <view class=‘ycy‘> <text>111111</text> </view> </swiper-item> <swiper-item> <view class=‘ycy‘> <text>222222</text> </view> </swiper-item> </swiper>
.js
Page({ data: { currentTab: 0, }, 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 }) } }, })
.wxss
.swiper-tab{ width: 100%; border-bottom: 1rpx solid #eee; text-align: center; height: 90rpx; line-height: 90rpx; display: flex; flex-flow: row; font-size: 32rpx; justify-content: space-between; } .swiper-tab-item{ width: 50%; color:#434343; } .active{ color:#F65959; border-bottom: 2rpx solid #F65959; } .ycy{ width: 100%; display: flex; height: 95rpx; border-bottom: 1px solid #eee; position: relative; }