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

itlao6 微信小程序 原创 开发&源码1 575字数 1501阅读5分0秒阅读模式

前一篇微信小程序:“我的”页面布局(一):微信用户信息获取及UI已经介绍了功能菜单列表的实现方式,因为篇幅问题,到这里再详细说下...

比较懒,还是上一篇的图:文章源自IT老刘-https://itlao6.com/892.html

 文章源自IT老刘-https://itlao6.com/892.html

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

如上一篇所属,“我的”页面菜单列表主要是用到了wx: for和navigator文章源自IT老刘-https://itlao6.com/892.html

二、 功能菜单列表

wxml:

利用navigator可以很方便的实现菜单功能,它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址:文章源自IT老刘-https://itlao6.com/892.html

  <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即可达到配置的作用,甚至如果有需求,还可以放在服务端做成可随意变化的:文章源自IT老刘-https://itlao6.com/892.html

  /**
   * 页面的初始数据
   */
  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老刘-https://itlao6.com/892.html


微信小程序:“我的”页面布局(二):可配置功能菜单列表
IT老五(it-lao5):关注公众号,一起源创,一起学习!

相关推荐:

微信小程序:“我的”页面布局(一):微信用户信息获取及UI
微信小程序:“我的”页面布局(二):可配置功能菜单列表文章源自IT老刘-https://itlao6.com/892.html 文章源自IT老刘-https://itlao6.com/892.html
继续阅读
weinxin
我的微信公众号
微信扫一扫关注公众号,不定时更新
itlao6
  • 本文由 发表于 2019年 4月 11日 22:19:49
  • 转载请务必保留本文链接:https://itlao6.com/892.html
评论  1  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定