2019年9月12日
选项卡选项
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">
求职邀约
</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">
婚恋邀约
</view>
</view>
这是选项卡上面的选项
CSS样式
/* 2019.09.11新增 */
.swiper-tab{
width: 100%;
border-bottom: 1rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height: 88rpx;
margin-bottom: 2rpx;
background-color: white;
}
.swiper-tab-item{
display: inline-block;
width: 33.33%;
color:#939494;
}
.active{
color:#036EB8;
border-bottom: 2rpx solid #036EB8;
}
其中的切换方法
js文件
data:{
currentTab:0, //选项卡下标
windowHeight:'', //页面高度
},
/**
* 生命周期函数--监听页面加载
* 页面加载时获取页面高度
*/
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
this.setData({
windowHeight: systemInfo.windowHeight
});
},
/**
* 方法--选项卡切屏
* 创建时间:2019.09.11
* clickTab=>点击切换
* swiperTab=>改变事件
*/
clickTab(e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
swiperTab(e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
选项卡内容
wxml文件
注:这个就跟在上一个的HTML代码下面,是同一个页面
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" style="height: {{windowHeight-65}}px;">
<!-- 求职者邀约 -->
<swiper-item>
<scroll-view scroll-y="true" style="height:100%;" >
<view>
<!-- 求职邀约内容 -->
</view>
</scroll-view>
</swiper-item>
<!-- 婚恋者邀约 -->
<swiper-item>
<scroll-view scroll-y="true" style="height:100%;" >
<!-- 婚恋邀约内容 -->
</scroll-view>
</swiper-item>
</swiper>
其中的 swiper-item是固定高度的,只有页面的三分之一左右,
所以在页面加载时获取页面高度,调整swiper-item的高度,
但是因为里面的内容是填充的,可能很长,不可能仅仅一个屏幕的长度,
所以用了scroll-view,竖向的一个滚轴,高度填写100%,就可以将所有内容显示出来