1、首先在wxml文件中:
<view class="main">
<view>
<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>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">
<swiper-item>
你好
</swiper-item>
<swiper-item>
<view>欢迎评价</view>
</swiper-item>
</swiper>
</view>
2、js文件中:
/**
* 页面的初始数据
*/
data: {
winWidth: 0,
winHeight: 0,
currentTab: 0,
},
swichNav: function( e ) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
},
bindChange: function( e ) {
var that = this;
that.setData( { currentTab: e.detail.current });
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("options")
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight+50
});
}
});
var tokens = wx.getStorage({
key: 'token',
});
that.setData({
id: options.id,
token: tokens
})
},
3、wxss样式:
/* tab样式开始 */
.swiper-tab{
height: 10vh;
display: flex;
line-height: 7vh;
margin-bottom: 10px;
}
.swiper-tab-list{
font-size: 16px;
display: inline-block;
width: 50%;
color: #777777;
text-align: center;
margin-bottom: 10px;
}
.on{
color: blue;
border-bottom: 3rpx solid blue;
padding-bottom:1vh;
}
.swiper-box{
display: block;
height: 80vh;
width: 100%;
overflow: scroll;
}
.swiper-box view{
text-align: center;
}
/* tab样式结束 */