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

文章摘要：小程序二级页面如何设置导航 小程序 导航栏

小程序二级页面设置导航栏代码如下 index.wxml部分 <view class=' […]

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

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&gt;

</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{

width: 200px;margin: 0 auto;

}

.MenuDiv{

overflow: hidden;

}

.MenuDiv:first-child{

border-bottom: 1px solid #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: 1px solid #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) {

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

})

}

},

onLoad: function (options) {

},

onReady: function () {

},

onShow: function () {

},

onHide: function () {

},

onUnload: function () {

},

onPullDownRefresh: function () {

},

onReachBottom: function () {

},

onShareAppMessage: function () {

}

})