- 分析页面布局
状态栏 + 内容块
利用transtion 进行: - 页面块之状态栏
wxml
<view class="navbox navbox-{{activeId}}">
<block wx:for="{{navList}}" wx:key="index">
<view bindtap="bindViewTap" class="{{activeId==index?'active':''}}" data-index="{{index}}">标签</view>
</block>
</view>
js
bindViewTap: function(e) {
const index=e.currentTarget.dataset.index;
this.setData({activeId:index})
},
wxss
.navbox {
width:100%;
display: flex;
flex-shrink: 0;
height:100rpx;
position:relative;
background:#fff;
}
.navbox view {
width: 20%;
line-height: 100rpx;
text-align: center;
}
.navbox::after{
content:'';
width:20%;
position:absolute;
left:0;
height:2rpx;
background-color: red;
bottom:2rpx;
transition: all 0.4s;
}
.navbox view.active{
color:#cafede;
}
.navbox-0::after{
left:0;
}
.navbox-1::after{
left:20%;
}
.navbox-2::after{
left:40%;
}
.navbox-3::after{
left:60%;
}
.navbox-4::after{
left:80%;
}
3 内容块
wxs
.page-content{
width:100%;
height:calc(100% - 100rpx);
overflow-x:hidden;
}
.page-content-move{
display: flex;
height: 100%;
width: 100%;
flex-direction: row;
flex-wrap:nowrap;
transition: all .3s;
transform: translateX(0);
}
.content{
width:100vw;
height:100vh;
flex-shrink: 0;
}
wxml
<view class="page-content">
<view class="page-content-move page-content-move-{{activeId}}" style="transform:translateX({{-100 * activeId}}vw)">
<view class="content" wx:for="{{navList}}" wx:key="index">内容区域{{index}}</view>
</view>
</view>