微信小程序：“我的”页面布局（二）：可配置功能菜单列表

前一篇微信小程序：“我的”页面布局（一）：微信用户信息获取及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: '' }
    ]
  },

简书：ThinkinLiu 博客: IT老五

---

IT老五（it-lao5）：关注公众号，一起源创，一起学习！

相关推荐：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI
微信小程序：“我的”页面布局（二）：可配置功能菜单列表