小程式tab選項卡
造輪子啦 ！ 造輪子啦！！造輪子啦！！！重要的事情說三遍！！！！
wxml:
<view class='tab'>
<view class='{{tag == index?"true":"false"}}' wx:for='{{4}}' wx:key='key' data-index='{{index}}' catchtap='btn'>頁面{{index}}</view>
</view>
<swiper current="{{tag}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<!-- 頁面一 -->
<swiper-item>
<scroll-view class='scroll' scroll-y='true'>
頁面一
</scroll-view>
</swiper-item>
<!-- 頁面二 -->
<swiper-item>
<scroll-view style='height:100%;' scroll-y='true'>
頁面二
</scroll-view>
</swiper-item>
<!-- 頁面三 -->
<swiper-item>
<scroll-view style='height:100%;' scroll-y='true'>
頁面三
</scroll-view>
</swiper-item>
<!-- 頁面四 -->
<swiper-item>
<scroll-view style='height:100%;' scroll-y='true'>
頁面四
</scroll-view>
</swiper-item>
</swiper>
wxss:
page {
overflow: hidden;
}
.tab {
width: 95%;
height: 80rpx;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
.true {
width: 20%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: orange;
border-bottom: 5rpx solid orange;
font-size: 35rpx;
}
.false {
width: 20%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 33rpx;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
text-align: center;
background: #ddd;
margin-top: 10rpx;
}
js:
Page({
/**
* 頁面的初始資料
*/
data: {
tag: 0,
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function(e) {
var that = this
/** 獲取系統資訊 */
wx.getSystemInfo({
success: function(res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
// 點選事件
btn: function(e) {
var that = this;
console.log(e.currentTarget.dataset.index, "點選")
var tag = e.currentTarget.dataset.index;
// console.log(tag, "e")
that.setData({
tag: tag,
})
},
// 滑動切換tab
bindChange: function(e) {
console.log(e, "滑動")
var that = this;
that.setData({
tag: e.detail.current
});
},
})