微信小程序:“我的”页面布局(二):可配置功能菜单列表

前一篇微信小程序:“我的”页面布局(一):微信用户信息获取及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
微信小程序:“我的”页面布局(二):可配置功能菜单列表



发表评论

必填项已用*标注

+ 7 = 13