微信小程序：“我的”页面布局（二）：可配置功能菜单列表
前一篇微信小程序：“我的”页面布局（一）：微信用户信息获取及UI已经介绍了功能菜单列表的实现方式，因为篇幅问题，到这里再详细说下...
比较懒，还是上一篇的图：
微信小程序--“我的“页面.jpg
如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator
二、 功能菜单列表
wxml：
利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrapper"</span>></span> <span class="hljs-tag"><<span class="hljs-name">block</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{menuitems}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"item"</span>></span> <span class="hljs-tag"><<span class="hljs-name">navigator</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"{{item.url}}"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-item"</span> <span class="hljs-attr">hover-class</span>=<span class="hljs-string">"list-item_active"</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'item'</span>></span> <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'item-image'</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'../../images/icon-index.png'</span>></span><span class="hljs-tag"></<span class="hljs-name">image</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item-text"</span>></span>{{item.text}}<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'item-array'</span>></span>><span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"div-line"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">navigator</span>></span> <span class="hljs-tag"></<span class="hljs-name">block</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> |
wxss：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<span class="hljs-selector-class">.list-wrapper</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; } <span class="hljs-comment">/* 横着的分割View样式 */</span> <span class="hljs-comment">/*分割线样式*/</span> <span class="hljs-selector-class">.div-line</span>{ <span class="hljs-attribute">background</span>: <span class="hljs-number">#E0E3DA</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">3</span>rpx; } <span class="hljs-selector-class">.list-item</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">120</span>rpx; } <span class="hljs-selector-class">.list-item_active</span> { <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#E0E3DA</span>; } <span class="hljs-selector-class">.item</span> { <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">flex-direction</span>: row; <span class="hljs-attribute">align-items</span>: center; <span class="hljs-attribute">height</span>: <span class="hljs-number">120</span>rpx; } <span class="hljs-selector-class">.item-text</span> { <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">left</span>: <span class="hljs-number">100</span>rpx; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">38</span>rpx; } <span class="hljs-selector-class">.item-array</span> { <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">right</span>: <span class="hljs-number">50</span>rpx; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">38</span>rpx; } <span class="hljs-selector-class">.item-image</span> { <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">left</span>: <span class="hljs-number">50</span>rpx; <span class="hljs-attribute">width</span>: <span class="hljs-number">40</span>rpx; <span class="hljs-attribute">height</span>: <span class="hljs-number">40</span>rpx; } |
js
在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="hljs-comment">/** * 页面的初始数据 */</span> data: { <span class="hljs-attr">userInfo</span>: {}, <span class="hljs-attr">hasUserInfo</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">canIUse</span>: wx.canIUse(<span class="hljs-string">'button.open-type.getUserInfo'</span>), <span class="hljs-attr">menuitems</span>: [ { <span class="hljs-attr">text</span>: <span class="hljs-string">'完善信息'</span>, <span class="hljs-attr">url</span>: <span class="hljs-string">'../userinfo/userinfo'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'../../images/icon-index.png'</span>, <span class="hljs-attr">tips</span>: <span class="hljs-string">''</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">'个性设置'</span>, <span class="hljs-attr">url</span>: <span class="hljs-string">'../userinfo/userinfo'</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">'../../images/icon-index.png'</span>, <span class="hljs-attr">tips</span>: <span class="hljs-string">''</span> } ] }, |
简书：ThinkinLiu 博客: IT老五
IT老五（it-lao5）：关注公众号，一起源创，一起学习！
