前一篇微信小程序：“我的”页面布局（一）：微信用户信息获取及UI已经介绍了功能菜单列表的实现方式，因为篇幅问题，到这里再详细说下...
比较懒，还是上一篇的图：
微信小程序--“我的“页面.jpg
如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator
二、 功能菜单列表
wxml：
利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：
<view class="list-wrapper">
<block wx:for="{{menuitems}}" wx:key="item">
<navigator url="{{item.url}}" class="list-item" hover-class="list-item_active">
<view class='item'>
<image class='item-image' src='../../images/icon-index.png'></image>
<text class="item-text">{{item.text}}</text>
<text class='item-array'>></text>
</view>
<view class="div-line"></view>
</navigator>
</block>
</view>
wxss：
.list-wrapper {
width: 100%;
}
/* 横着的分割View样式 */
/*分割线样式*/
.div-line{
background: #E0E3DA;
width: 100%;
height: 3rpx;
}
.list-item {
width: 100%;
height: 120rpx;
}
.list-item_active {
background-color: #E0E3DA;
}
.item {
display: flex;
flex-direction: row;
align-items: center;
height: 120rpx;
}
.item-text {
position: fixed;
left: 100rpx;
font-size: 38rpx;
}
.item-array {
position: fixed;
right: 50rpx;
font-size: 38rpx;
}
.item-image {
position: fixed;
left: 50rpx;
width: 40rpx;
height: 40rpx;
}
js
在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：
/**
* 页面的初始数据
*/
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
menuitems: [
{ text: '完善信息', url: '../userinfo/userinfo', icon: '../../images/icon-index.png', tips: '' },
{ text: '个性设置', url: '../userinfo/userinfo', icon: '../../images/icon-index.png', tips: '' }
]
},
个人博客: IT老五
微信公众号：【IT老五（it-lao5）】，一起源创，一起学习！
