小程序二级页面怎样设置导航

小程序二级页面怎样设置导航

小程序二级页面设置导航栏代码以下

index.wxml部份

<viewclass='dataCent'>
<viewclass='MenuDiv'wx:for="{{arrayMenu}}"data-index="{{index}}"bindtap='clickMenu'>
<viewclass='leftimg'>
<imagesrc="https://jiqiren.icehot.cc/wxtest/img2.png"></image>
</view>
<viewclass='rightimg'>
<viewclass='rightimg-top'>
{{item.topcent}}
</view>
<viewclass='rightimg-bot'>
{{item.botcent}}
</view>
<viewclass='bottomImages'hidden='{{item.hideHidden}}'>
<viewwx:for="{{item.menu}}">{{item.cent}}</view>
</view>
</view>
</view>
</view>

index.wxss部份

.dataCent{
width:200px;margin:0auto;
}
.MenuDiv{
overflow:hidden;
}
.MenuDiv:first-child{
border-bottom:1pxsolid#ccc;
}
.MenuDiv>view{
float:left;
}
.rightimg{
width:calc(100%-10px);
text-align:center;
}
.leftimg>image{
width:10px;height:10px;
}
.rightimg-top{
font-size:40rpx;
}
.rightimg-bot{
font-size:20rpx;
}
.bottomImages>view{
font-size:30rpx;padding-left:15rpx;box-sizing:border-box;
line-height:2;
border-top:1pxsolid#ededed;
}

app.json部份

Page({
data:{
arrayMenu:[{
topcent:'菜单一',
botcent:'caidanyi',
menu:[
{
cent:'菜单1⑴'
},
{
cent:'菜单1⑵'
},
{
cent:'菜单1⑶'
}
],
hideHidden:true
},
{
topcent:'菜单二',
botcent:'caidaner',
menu:[
{
cent:'菜单2⑴'
},
{
cent:'菜单2⑵'
},
{
cent:'菜单2⑶'
}
],
hideHidden:true
}
]
},
clickMenu:function(e){
varthat=this;
console.log("打印索引值",e.currentTarget.dataset.index);
varindex=e.currentTarget.dataset.index;
varstaues=that.data.arrayMenu[index].hideHidden;
console.log("111",staues);
varstauesval="arrayMenu["+index+"].hideHidden";
if(staues==true){
that.setData({
[stauesval]:false
})
}else{
that.setData({
[stauesval]:true
})
}
},
onLoad:function(options){
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
},
onShareAppMessage:function(){
}
})

本文来源：https://www.yuntue.com/post/78904.html | 云服务器网，转载请注明出处！