已解決不同頁面不同高度
已解決卡死問題
.wxml
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">紅色</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">綠色</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">黃色</view>
</view>
<view class="swiper-tab-temp"></view>
<view>
<swiper current="{{currentTab}}" autoplay="{{true}}" class="swiper-box" duration="300" style="height:600px" bindchange="bindChange">
<swiper-item style="background-color:red">
紅色内容
</swiper-item>
<swiper-item style="background-color:green">
綠色内容
</swiper-item>
<swiper-item style="background-color:yellow">
黑色内容
</swiper-item>
</swiper>
</view>
.wxss
.swiper-tab {
width: 100%;
border-bottom: 1px solid #777;
text-align: center;
line-height: 40px;
background-color: #fff;
}
.swiper-tab-list {
font-size: 13px;
display: inline-block;
width: 33.3%;
color: #777;
}
.on {
color: #FFF;
background-color: #528dc3;
border-top:5rpx solid #528dc3;
border-bottom:5rpx solid #528dc3;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}
.js
Page({
data: {
currentTab: '',
},
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
swichNav: function (e) {
var that = this;
that.setData({
currentTab: e.target.dataset.current
});
},
})
官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
效果如圖
本文純屬原創
最後附上源碼：https://www.ddkblog.top/article/detail/22
有興趣的可以看下我的微信小程式
