ADADADADAD

小程序二级页面如何设置导航[ 建站问答 ]

建站问答时间：2024-12-01 19:15:52

作者：文/会员上传

幻兽帕鲁孵化器制作在哪里

简介：

小程序二级页面设置导航栏代码如下index.wxml部分<viewclass='dataCent'><viewclass='MenuDiv'wx:for="{{arrayMenu}}"data-index="{{index}}"bindtap=&#39

以下为本文的正文内容，内容仅供参考！本站为公益性网站，复制本文以及下载DOC文档全部免费。

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

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