小程序料理第四课如何设计一个简单列表

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

三、列表与下拉

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

首先我们了解一下数据的绑定 ，其实列表中的动态数据均来自对应 Page 的 data部分，数据绑定使用 Mustache 语法（双大括号）将变量包起来。我们先举几个例子了解一下：

（1）WXML文件：

<view> {{ message }} view>

JS文件：

Page({
  data: {
    message: 'Hello MINA!'
  }
})

在界面上的显示为message的内容Hello MINA!

（2）WXML文件：

<viewid="item-{{id}}">view>

    JS文件：

Page({

  data: {
    id: 0
  }
}) 

用于给view的id赋值

（3）WXML文件：

"{{condition}}">

         JS文件：

Page({
  data: {
    condition: true
  }
})

       参与判断，如果if之后的结果为true则显示，为false则不显示

（4）WXML文件：

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> checkbox>

特别注意：关键字false要用双括号括起来，不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

   而双大括号也支持一些运算，如三元运算{{flag ? true : false}}、

算术运算{{a + b}} + {{c}} + d、逻辑判断 、

字符串运算{{"hello" +name}}、数据路径计算{{object.key}} {{array[0]}}等，除此之外还能组合成数组、对象，这个我们在用到的时候再提。

       接着我们来讨论一下要列出列表所需要的另外的工具wx:for和wx:if

wx:for

wx：for用于列表的循环，将在page中绑定的数组依次遍历输出。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item（下面搬运了不少官方文档=^=），以下为基本用法：

 

"{{array}}">

  {{index}}: {{item.message}}

Page({

  data: {

    array: [{

      message: 'foo',

    }, {

      message: 'bar'

    }]

  }

})

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

"{{array}}" wx:for-index="idx" wx:for-item="itemName">

  {{idx}}: {{itemName.message}}

wx:for 也可以嵌套，下边是一个九九乘法表

"{{[1,2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">

  "{{[1, 2, 3, 4, 5,6, 7, 8, 9]}}" wx:for-item="j">

    "{{i <= j}}">

      {{i}} * {{j}} = {{i * j}}

   

 

可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如  中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1.    字符串，代表在 for 循环的 array 中 item 的某个 property，该property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2.    保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

注意：

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<viewwx:for="array">

  {{item}}

view>

等同于

<viewwx:for="{{['a','r','r','a','y']}}">

  {{item}}

view>

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<viewwx:for="{{[1,2,3]}} ">

  {{item}}

view>

等同于

<viewwx:for="{{[1,2,3] + ' '}}" >

  {{item}}

view>

wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

"{{condition}}"> True

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

"{{length> 5}}"> 1

"{{length> 2}}"> 2

3

    了解了以上这些基本的用法，接下来我们就可以愉快的创建我们想要的列表了。

首先在JS文件中的page的data里面，我们创建数组groups：

groups: [{

     id: 1,

     name: "我的消息",

     hidden: true,

     count: 0

   }, {

     id: 2,

     name: "我的收藏",

     hidden: true,

     count: 0

   }, {

     id: 3,

     name: "我的好友",

     hidden: true,

     count: 6

   }],

然后在wxml文件中，设置列表显示

<blockwx:for="{{groups}}"wx:key="id"wx:for-index="idxgrp"wx:for-item="groups">

<viewclass="list-view-groups"   id="{{groups.id}}"bindtap="groupclick">

 <viewclass="list-view-image">

     <blockwx:if="{{true}}">

       <imageclass="list-image"id="image{{groups.id}}"src="/../image/me.png">image>

     block>

     <blockwx:else>

       <imageclass="list-image"id="image{{groups.id}}"src="/../image/mass.png">image>

     block>

    view>

    <viewclass="list-view-text">

     <textclass="list-text"id="name{{groups.id}}">{{groups.name}}text>

    view>

    <viewclass="list-view-count">

     <textclass="list-text-count"id="count{{groups.id}}">({{groups.count}})text>

    view>

  view>

  block>

其中第一行的代码用来设置对数组的遍历，第二行<viewclass="list-view-groups"设置列表组，第三行<viewclass="list-view-image">设置列表图片，<blockwx:if="{{true}}">设置是否可见，而<viewclass="list-view-text">设置列表文字，接着<viewclass="list-view-count">设置列表消息或者统计条数

紧接着，我们设置一下上面三个部分的格式，以免看起来太突兀。在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%;

}

    ​我们的列表就初步完成了，显示效果如下：