温馨提示×

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

九三
294
2020-12-24 13:46:15
栏目: 云计算
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

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

index.wxml部分

<view class='dataCent'>

<view class='MenuDiv' wx:for="{{arrayMenu}}" data-index="{{index}}" bindtap='clickMenu'>

<view class='leftimg'>

<image src="https://jiqiren.icehot.cc/wxtest/img2.png"></image>

</view>

<view class='rightimg'>

<view class='rightimg-top'>

{{item.topcent}}

</view>

<view class='rightimg-bot'>

{{item.botcent}}

</view>

<view class='bottomImages' hidden='{{item.hideHidden}}'>

<view wx:for="{{item.menu}}">{{item.cent}}</view>

</view>

</view>

</view>

</view>

index.wxss部分

.dataCent{

width200px;margin0 auto;

}

.MenuDiv{

overflow: hidden;

}

.MenuDiv:first-child{

border-bottom1px solid #ccc;

}

.MenuDiv>view{

float: left;

}

.rightimg{

widthcalc(100% - 10px);

text-align: center;

}

.leftimg>image{

width10px;height10px;

}

.rightimg-top{

font-size40rpx;

}

.rightimg-bot{

font-size20rpx;

}

.bottomImages>view{

font-size30rpx;padding-left15rpx;box-sizing: border-box;

line-height2;

border-top1px solid #ededed;

}

app.json部分

Page({

data: {

arrayMenu: [{

topcent'菜单一',

botcent'caidanyi',

menu: [

{

cent'菜单1-1'

},

{

cent'菜单1-2'

},

{

cent'菜单1-3'

}

],

hideHiddentrue

},

{

topcent'菜单二',

botcent'caidaner',

menu: [

{

cent'菜单2-1'

},

{

cent'菜单2-2'

},

{

cent'菜单2-3'

}

],

hideHiddentrue

}

]

},

clickMenufunction (e{

var that = this;

console.log("打印索引值", e.currentTarget.dataset.index);

var index = e.currentTarget.dataset.index;

var staues = that.data.arrayMenu[index].hideHidden;

console.log("111", staues);

var stauesval = "arrayMenu[" + index + "].hideHidden";

if (staues == true) {

that.setData({

[stauesval]: false

})

else {

that.setData({

[stauesval]: true

})

}

},

onLoadfunction (options{

},

onReadyfunction ({

},

onShowfunction ({

},

onHidefunction ({

},

onUnloadfunction ({

},

onPullDownRefreshfunction ({

},

onReachBottomfunction ({

},

onShareAppMessagefunction ({

}

})

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:微信小程序二级页面怎么设置导航页

0