https://www.cnblogs.com/huiAlex/p/9462918.html
http://www.codegong.com/document/wx-swiper-scroll-view.html
一、功能描述
在同一個(gè)頁(yè)面內(nèi)實(shí)現(xiàn)不同展示頁(yè)面的切換功能，如下圖所示
image.png
二淋昭、代碼實(shí)現(xiàn)
- index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
currentData: 0,
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
},
//獲取當(dāng)前滑塊的index
bindchange: function (e) {
const that = this;
that.setData({
currentData: e.detail.current
})
},
//點(diǎn)擊切換，滑塊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
})
}
}
})
- index.wxml
<view class='topTabSwiper'>
<view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推薦</view>
<view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>熱點(diǎn)</view>
<view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>關(guān)注</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
<swiper-item><view class='swiper_con'>welcome come to 推薦</view></swiper-item>
<swiper-item><view class='swiper_con'>welcome come to 熱點(diǎn)</view></swiper-item>
<swiper-item><view class='swiper_con'>welcome come to 關(guān)注</view></swiper-item>
</swiper>
- index.wxss
.tab {
float: left;
width: 33.3333%;
text-align: center;
padding: 10rpx 0;
}
.topTabSwiper {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
zoom: 1;
}
.topTabSwiper:after {
content: "";
clear: both;
display: block;
}
.tabBorer {
border-bottom: 1px solid #f00;
color: #f00;
}
.swiper {
width: 100%;
}
.swiper_con {
text-align: center;
width: 100%;
height: 100%;
padding: 80rpx 0;
}
