小程序料理第四课 如何建立简单列表

上一篇教程中讲到了列表与下拉,这次教程我们接着往下讲.

三、列表与下拉

这部分涉及了几个文件的传值和绑定操作,还有一些基本的函数,在我们了解如何设计列表之前,需要知道一些基本操作。

首先我们了解一下数据的绑定 ,其实列表中的动态数据均来自对应 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:forwx: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%;

}

我们的列表就初步完成了,显示效果如下:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180410G1Y88V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券