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

时间:2022-12-06 01:21

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

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

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

}

})

标签:
随便看看
本类推荐
本类排行
热门标签

我国国家通讯社行不行啊细狗新年贺词祝福语2023年祝福语新年新年贺词新年贺词祝福语居家抗病毒小药箱除夕高速免费吗2022年除夕高速免费吗春联春联句子大全春联句子大全七字年夜饭十二道菜年夜饭十二道菜单年夜饭吃什么年夜饭吃什么菜吃年夜饭的寓意年夜饭黑芝麻菊花茶晒菊花茶腌腊肉送妈妈生日礼物汉白玉送闺蜜水钻送女人礼物爸爸生日送礼物送老公