小程序二级页面如何设置导航

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

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-1'

},

{

cent:'菜单1-2'

},

{

cent:'菜单1-3'

}

],

hideHidden:true

},

{

topcent:'菜单二',

botcent:'caidaner',

menu:[

{

cent:'菜单2-1'

},

{

cent:'菜单2-2'

},

{

cent:'菜单2-3'

}

],

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(){

}

})

了解更多小程序二级页面如何设置导航相关的解答，就上多想派（www.duoxiangpai.com）。