造轮子啦 ！ 造轮子啦！！造轮子啦！！！重要的事情说三遍！！！！
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
});
},
})