wxml代码
<!--导航切换条-->
<viewclass="nav">
<viewbindtap="navSwitch"data-index="0"class="{{navState==0?'nav-switch-style':''}}">推荐</view>
<viewbindtap="navSwitch"data-index="1"class="{{navState==1?'nav-switch-style':''}}">文章小知识</view>
<viewbindtap="navSwitch"data-index="2"class="{{navState==2?'nav-switch-style':''}}">视频</view>
</view>
<!--内容区域-->
<viewclass="main">
<viewwx:if="{{navState==0}}"class="main1">1</view>
<viewwx:elif="{{navState==1}}"class="main2">2</view>
<viewwx:else="{{navState==2}}"class="main3">3</view>
</view>
less代码
.nav{
display:flex;
justify-content:space-evenly;
height:120rpx;
view{
font-size:30rpx;
font-weight:400;
color:#333333;
line-height:120rpx;
padding:030rpx;
}
.nav-switch-style{
font-size:34rpx;
font-weight:bold;
color:#B27844;
}
}
.main{
.main1{
background-color:crimson;
height:600rpx;
}
.main2{
background-color:saddlebrown;
height:600rpx;
}
.main3{
background-color:darkorchid;
height:600rpx;
}
}
js代码
data:{
navState:0,//导航状态
},
bindchange(e){
//console.log(e.detail.current)
letindex=e.detail.current;
this.setData({
navState:index
})
},
//点击导航
navSwitch:function(e){
//console.log(e.currentTarget.dataset.index)
letindex=e.currentTarget.dataset.index;
this.setData({
navState:index
})
},
如果觉得《微信小程序页面切换》对你有帮助，请点赞、收藏，并留下你的观点哦！
