一、效果图
二、代码
wxml页面:
<view id="content">
<!-- 1. 可移动视图 -->
<view class="list">
<view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">
介绍
</view>
<view class="icon">|</view>
<view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">
图片
</view>
<view class="icon">|</view>
<view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">
短评
</view>
<view class="icon">|</view>
<view class="{{currentTab==3?'select':'default'}}" data-current="3" bindtap="switchNav">
影评
</view>
</view>
<!-- 2. 子页面 暂时不用style="height: {{winHeight}}px;"-->
<swiper current="{{currentTab}}" style="height: 920px;">
<!-- 2.1 介绍 -->
<swiper-item>
<view>张三</view>
</swiper-item>
<!-- 2.2 图片 -->
<swiper-item>
<view>王五</view>
</swiper-item>
<!-- 2.3 短评 -->
<swiper-item>
<view>李四</view>
</swiper-item>
<!-- 2.4 影评 -->
<swiper-item>
<view>赵六</view>
</swiper-item>
</swiper>
</view>
wxss页面:
.list {
display: flex;
width: 100%;
background-color: #201D1D;
color: white;
}
.select {
font-size: 12px;
color: red;
width: 25%;
text-align: center;
height: 37px;
line-height: 37px;
border-bottom: 5px solid #777777;
}
.default {
font-size: 12px;
height: 37px;
line-height: 37px;
margin: 0 auto;
}
.icon {
margin-top: 10px;
}
js页面:
Page({
data: {
currentTab: 0,
},
// 事件处理函数
switchNav: function (e) { //可移动视图组件的方法
// console.log(e)
if (this.data.currentTab == e.target.dataset.current) {
return false;
} else {
this.setData({
currentTab: e.target.dataset.current
})
}
},
})