微信小程式選項卡頁面切換
阿新 • • 發佈:2018-12-11
選項卡效果切換如下:滑動即可對應切換
wxml程式碼
<view class='TabSwiper'> <view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>遊戲</view> <view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>專題</view> <view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>挑戰</view> </view> <swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange"> <swiper-item><view class='swiper_con'>1.遊戲</view></swiper-item> <swiper-item><view class='swiper_con'>2.專題</view></swiper-item> <swiper-item><view class='swiper_con'>3.挑戰</view></swiper-item> </swiper>
wxss程式碼:
.tab{ float: left; width: 33.3333%; text-align: center;padding: 10rpx 0; } .TabSwiper{ width: 100%; height: 150rpx; line-height: 150rpx; display: flex; flex-direction: row; background-color: rgb(248, 248, 248); } .tabBorer{ border-bottom: 1px solid blue; color: blue; } .swiper{ width: 100%; } .swiper_con{ text-align: center; width: 100%; height: 100%; padding: 80rpx 0; }
js程式碼:
Page({ data: { currentData: 0, }, //獲取當前滑塊的index bindchange: function (e) { const that = this; that.setData({ currentData: e.detail.current }) }, onLoad: function () { }, //點選切換,滑塊index賦值 checkCurrent: function (e) { const that = this; if (that.data.currentData === e.target.dataset.current) { return false; } else { that.setData({ currentData: e.target.dataset.current }) } } })