原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处
代码中没有出现功能列表，只是出现的循环输出，这样做有利于后期的功能的添加与修改,主要涉及到小程序的列表渲染
相关官方文档
列表渲染：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html
代码分析：
下面我摘取了Demo中的index中的相关部分进行分析
这个列表渲染可以看作一个整体，两个部分。
整体
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
指定的list:
list: [
{
id: 'view',
name: '视图容器',
open: false ,
pages: ['view', 'scroll-view', 'swiper']
}, {
id: 'content',
name: '基础内容',
open: false,
pages: ['text', 'icon', 'progress']
}, {
id: 'form',
name: '表单组件',
open: false,
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
}, {
id: 'nav',
name: '导航',
open: false,
pages: ['navigator']
}, {
id: 'media',
name: '媒体组件',
open: false,
pages: ['image', 'audio', 'video']
}, {
id: 'map',
name: '地图',
pages: ['map']
}, {
id: 'canvas',
name: '画布',
pages: ['canvas']
}
]
注：wx.key为list.id,此处的item=list
指定wx:key的好处在这里最难点For的wx:key，您肯定不知道的！（框架细节十一）
<view class="kind-list-item">
.kind-list-item {
margin: 20rpx 0;
background-color: #FFFFFF; //白色背景
border-radius: 4rpx; //边框圆角
overflow: hidden; //overflow 属性规定当内容溢出元素框时发生的事情, hidden 内容会被修剪，并且其余内容是不可见的。
}
两个部分
1.对于一级目录的处理
<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
<view class="kind-list-text">{{item.name}}</view> //循环输出list.name,such as 视图容器，基础内容，
<image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image> //循环输出对应的logo
</view>
bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,即kindToggle
kindToggle: function (e) {
var id = e.currentTarget.id, list = this.data.list;
//如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，这个对象就是currentTarget 视图层-wxml-currentTarget
for (var i = 0, len = list.length; i < len; ++i) { //遍历id
if (list[i].id == id) {
list[i].open = !list[i].open //找到后改变open的状态，具体体现在点击两次相同组件，会恢复关闭的状态
} else {
list[i].open = false //非目的ID关闭open
}
}
this.setData({ //将改变过open状态的list重新保存
list: list
});
}
我们分析一下这个三元运算符
{{item.open ? 'kind-list-item-hd-show' : ''}}
test — 测试
任何 Boolean 表达式。
expression1
为 true 时返回的表达式。
expression2
为 false 时返回的表达式。
我们把代码转换为我们易于理解的if..else..形式
if(true)
class = class + "kind-list-item-hd-show";
else
class=" ";
在css文件中发现了这个
.kind-list-item-hd-show {
opacity: .2;
}
百度查到了opacity属性，是设置元素的不透明级别的参数，规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
这样就比较容易理解，如果该条的open是true，就为他增加kind-list-item-hd-show的class,达到透明的效果，也就是下面这个效果
2.对于二级目录的处理
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
<navigator url="pages/{{page}}/{{page}}" class="navigator">
<view class="navigator-text">{{page}}</view> //page名即功能名
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
CSS控制二级目录
.kind-list-item-bd {
height: 0;
overflow: hidden; //overflow 属性规定当内容溢出元素框时发生的事情, hidden 内容会被修剪，并且其余内容是不可见的。
}
.kind-list-item-bd-show {
height: auto; //总之来说，只有开启这个class时，二级目录才开始展现。
}
CSS控制二级目录的条目
.navigator-box {
opacity: 0; //完全透明
position: relative; //生成相对定位的元素，相对于其正常位置进行定位
background-color: #FFFFFF; //背景色
line-height: 1.41176471; //设置行间距
font-size: 34rpx; //字体大小
transform: translateY(-50%); //沿Y轴向上移动50%
transition: .3s; //规定完成过渡效果需要多少秒或毫秒
}
.navigator-box-show {
opacity: 1; //不透明
transform: translateY(0); //沿Y轴移动0
}
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
item在此处的作用相当于this
.navigator-arrow {
padding-right: 26rpx; //内边距右26rpx
position: relative; //生成相对定位的元素，相对于其正常位置进行定位
}
相关资料
小程序wx:for、wx:for-items和wx:for-item的正确用法
WeApp-Demo github地址:WeApp-Demo
哪里写的不好的话，敬请指点。
