微信小程序（三）：选座系统（主要内容：列表渲染的应用）

因为只是个人的闲暇娱乐，从点击量和搜索量上来说，你很难看到这篇文章，如果我有幸让你您看到，那也是种缘分吧。有些基础的东西如在本章中说道，不会做过多原理上的解释，您可以查看这个系列的前两章内容，应该可以帮您滤清一些思路思维上的东西。

在做这个小程序期间，接到了要做个简单的选做系统，就是在界面上画出座位布局，在点击后可以根据座位情况进行选座或者离坐。

其实写这篇文章的目的很简单，其一是因为学校的需要，学习的这点东西虽不算精，但毕竟付出了心血，离别之际，留点东西，没什么，至少证明我来过（笑）。其次，这块的内容在写代码阶段，卡的最久，消耗的精力也最多，这也算是种总结吧。再然就是在查询资料的时候，结果不尽人意，所以我把我的东西发出来，如果希望对您有帮助。

我来屡一下整个选座系统的思路，因为涉及到的内容不一样，我应该分块来写，因为长了，大家也都懒得费时间去看。

首先，我们是要画出来教师的布局，其次，要让布局显示当前的座位信息，比如选座的和未选的分两种不同的颜色等。其次是用户的选座，在点击某个位置是，进行选座操作。在已选座位上，点击座位可以显示当前座位的用户信息，最后又离坐的功能。大致的功能就是这样，期间的一些思路我会详谈，因为在我看来，能写出来本身就是缘分，运气好罢了，再来回试的过程中才最后能实现这个功能。

话不多说，（已经不少了）进入正题，这篇文章我们先来看看怎样将界面“画”出来。实际就是要画出来几行几列的座位，首先我们先要考虑的就是我们用什么标签来当座位。

我们知道在开发者文档中，给了我们许多的画图api

然鹅，对我们来说，没必要这么复杂，但从布局上就要这样，后面的一些绑定功能，就更让人头大了。那我们干脆就用个标签，一个标签是一个座位。那用哪个标签呢？<view>？貌似可以，我们就用一排排的view放在界面上，然后设置下它的大小，再设置下背景颜色，不就可以了吗。view可以，当我准备下结论的时候。我在开发者文档的组件里发现了这个东西。

没错icon，说道这里，我顺便捎带提一下开发者文档的入口：

一、在开发者工具的菜单栏里的微信开发者工具的子菜单栏里

二、浏览器搜索“微信小程序 api”，找到这样一条sous搜索结果：

三、点下边（汗）：

https://developers.weixin.qq.com/miniprogram/dev/

我们再说回到icon，他有很多格式：

也就是说，它本身的属性就能满足我们的要求。

我们只需要一排排将icon显示在我们的页面当做座位就可以了，怎样实现呢？

一、手写，我在wxml页面手动输入几十个几百个icon，但是这种做法有危险，一来手疼，二来，界面是死的，那就没有存在的必要了，我也就不需要写这篇文章了。

在我来说第二种方法前，我们需要先了解写预备知识，列表渲染。

入口：框架--视图层--列表渲染

wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
使用 wx:for-item 可以指定数组当前元素的变量名，

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

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

我只是复制了部分内容，全部内容请大家到文档查看。有编程基础的同学，我认为就是页面的for循环，这样理解就好理解一些。所以呢，我们要做的就是，让icon循环一个数组，然后一个个“画”出来。

js里面编个数组：

界面我们这样写：

<icon wx:for="{{color}}" type='success'></icon>

让我们编译看看结果：

nice，通过这样一个简单的实例，大家应该就能够理解到wx：for怎么去用了。但是这个怎么换行呢，这样只有当页面排满的时候自动换行，我怎么去自定义设置呢？对呀，循环数组只能.....二维数组不就好了？

先循环外围数组，不就成了列，再循环里面的就好啦。

我们来测试下：

修改color

界面这样写：

<view wx:for="{{color}}">
<icon wx:for="{{item}}" type='success'></icon>
</view>

这里简单解释下，view循环外围数组，默认item指示数组的内容，这个在文档中有，所以item其实就是二维数组里面的两个一维数组，之后就和我们的上一步相同，让icon绑定这个一维数组，然后输出。我们来看结果：

奈斯！奈斯！可以一波！（笑）一波不了，接下来我们要解决颜色的问题。比如选了做的我们让他成为红色，没选的是绿色，怎么实现呢？icon标签有个color属性，可以设置icon的颜色，大家也看到了，我们设置的数组叫color，但其实数据是瞎编的，因为没啥用，这时候，我们就要在数组内放入颜色信息，然后当循环的时候，让icon的color属性等于数组内的值就好了，我们来看实现：

js：

界面这样写：

<view wx:for="{{color}}">
<icon wx:for="{{item}}" wx:for-item="in" color='{{in}}' type='success'></icon>
</view>

这里需要再解释下，icon绑定的item是color的内容，其实就是两个一维数组['green', 'red', 'green']和['green', 'green', 'green']，然后我们icon的color属性需要的是一维数组里面的数据元素。也就是icon的item，即color数组的item的item。wx：for-item是起个别名，之后我们就可以通过别名来引用，item是默认的，但是二维数组我们有两个，为了避免混淆我们给内层的起个别名。这里很重要，稍微有些复杂，大家要自行理解下，会影响到后面的内容。我们来看下结果：

蛮酷的，不是吗。因为一波不了，所以也就先到这里了。还有些其他的内容，比如选座，查看座位信息，离座什么的。而且，其实现在的界面还是死的。如果我从后台传来一张座位表，他还能画出来吗？哦，抱歉，可以的。其实这就是另一个问题了。你可以获得座位标的同时，获取布局信息，比如说六行八列，在前端的js里面你就可以写个函数，根据你的座位表和这个6 8来重新生成color数组。因为页面是根据color数组画的，所以，当数组改变的时候，页面也会相应的改变。

这就是原理了，我会在后面的文章中详细的说到。如果有心急的同学，可以先自行测试。

希望这篇文章可以帮助到你。

（这里给大家个忠告，csdn上写博客的时候，不要用输入法往里面打表情，之后的东西都会没的。这就是为什么这篇文章发了三遍的原因，手疼，哭）

微信小程序（三）：选座系统（主要内容：列表渲染的应用）

猜你喜欢