上一篇教程中讲到了列表与下拉,这次教程我们接着往下讲.
三、列表与下拉
这部分涉及了几个文件的传值和绑定操作,还有一些基本的函数,在我们了解如何设计列表之前,需要知道一些基本操作。
首先我们了解一下数据的绑定 ,其实列表中的动态数据均来自对应 Page 的 data部分,数据绑定使用 Mustache 语法(双大括号)将变量包起来。我们先举几个例子了解一下:
(1)WXML文件:
JS文件:
在界面上的显示为message的内容Hello MINA!
(2)WXML文件:
JS文件:
用于给view的id赋值
(3)WXML文件:
JS文件:
Page({
data: {
condition:true
}
})
参与判断,如果if之后的结果为true则显示,为false则不显示
(4)WXML文件:
特别注意:关键字false要用双括号括起来,不要直接写checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。
而双大括号也支持一些运算,如三元运算{}、算术运算{} + {} + d、逻辑判断 、
字符串运算{{"hello" +name}}、数据路径计算{} {}等,除此之外还能组合成数组、对象,这个我们在用到的时候再提。
接着我们来讨论一下要列出列表所需要的另外的工具wx:for和wx:if
wx:for
wx:for用于列表的循环,将在page中绑定的数组依次遍历输出。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item(下面搬运了不少官方文档=^=),以下为基本用法:
{}: {}
Page({
data: {
array: [{
message:'foo',
}, {
message:'bar'
}]
}
})
使用wx:for-item可以指定数组当前元素的变量名,使用wx:for-index可以指定数组当前下标的变量名:
{}: {}
wx:for也可以嵌套,下边是一个九九乘法表
{} * {} = {}
可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如中的输入内容,的选中状态),需要使用来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
1.字符串,代表在 for 循环的 array 中 item 的某个 property,该property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
2.保留关键字*this代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
注意:
当的值为字符串时,会将字符串解析成字符串数组
等同于
花括号和引号之间如果有空格,将最终被解析成为字符串
等同于
wx:if
在框架中,使用wx:if="{}"来判断是否需要渲染该代码块:
True
也可以用wx:elif和wx:else来添加一个 else 块:
1
2
3
了解了以上这些基本的用法,接下来我们就可以愉快的创建我们想要的列表了。
首先在JS文件中的page的data里面,我们创建数组groups:
groups: [{
id:1,
name:"我的消息",
hidden:true,
count:
}, {
id:2,
name:"我的收藏",
hidden:true,
count:
}, {
id:3,
name:"我的好友",
hidden:true,
count:6
}],
然后在wxml文件中,设置列表显示
{}
({})
其中第一行的代码用来设置对数组的遍历,第二行设置列表图片,设置是否可见,而设置列表文字,接着设置列表消息或者统计条数.
紧接着,我们设置一下上面三个部分的格式,以免看起来太突兀。在wxss中写下如下代码:
.list-text{
font-size:16px;
margin-left:5px;
}
.list-view-groups{
display:flex;
height:40px;
flex-direction:row;
align-items:center;
justify-content:left;
border-bottom:1pxsolidlightgray;
}
.list-image{
margin-left:5px;
width:24px;
height:24px;
}
.list-view-count{
width:10%;
}
.list-view-image{
width:10%;
}
.list-view-text{
width:80%;
}
我们的列表就初步完成了,显示效果如下:
领取专属 10元无门槛券
私享最新 技术干货