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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41500251/article/details/81865685

生活无趣且不易，一起找点乐子吧。欢迎评论，和文章无关的内容也没关系。

 

 

 

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

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

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

我来捋一下整个选座系统的思路，因为涉及到的内容不一样，所以这个选座系统我会分块来写。而且，如果长了，大家也都懒得费时间去看。（羞愧脸~）

首先，先要画出来教室的布局，其次，要让布局显示当前的座位信息，比如选座的和未选的分两种不同的颜色等。其次是用户的选座功能的完善，在点击某个位置时，进行选座操作。在已选座位上，点击座位可以显示当前座位的用户信息，最后又离坐等等功能，大致就是这样。

期间的一些思路我会详谈，因为在我看来，能写出来本身就是缘分，运气好罢了，在来回试的过程中才最后能实现这个功能。

 

话不多说，（已经不少了）进入正题，这篇文章我们先来看看怎样将界面“画”出来。

怎样画？

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

然鹅，对我们来说，没必要这么复杂，但从布局上一定要实现，后面的一些绑定功能，就更让人头大了。

所以放弃绘图功能。

那我们干脆就用个标签，一个标签是一个座位。那用哪个标签呢？<view>？貌似可以，我们就用一排排的view放在界面上，然后设置下它的大小，再设置下背景颜色，不就可以了吗。view可以，当我准备下结论的时候。我在开发者文档的组件里发现了这个东西。

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

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

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

三、点下边（汗）：

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

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

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

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

一、手写。

没问题，世界上最恐怖的方法，莽。

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

（先手动写几个，然后ctrl a -- ctrl c -- ctrl v -- ctrl a -- ctrl c--...........。 好方法！手动大拇哥，这种叫做有文化的莽夫，但是上面的问题解决不了，界面还是死的。）

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

入口：框架--视图层--列表渲染（开发者文档路径）

[code]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的color属性绑定一个数组，然后一个个“画”出来。

js里面编个数组：

界面我们这样写：

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

让我们编译看看结果：

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

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

我们来测试下：

修改color

界面这样写：

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

这里简单解释下，view循环外围数组，默认item指示数组的内容，这个在文档中有，所以item其实就是二维数组里面的两个一维数组，之后就和我们的上一步相同，让icon绑定这个一维数组，然后输出。我们来看结果：（解释的好想不清，但好想也不能解释的再清楚了，我觉得主要的理解在item。仔细看看开发者文档，把item的具体含义搞清~~）

奈斯！奈斯！可以一波！（笑）一波不了，接下来我们要解决颜色的问题。比如选了座的我们让他成为红色，没选的是绿色，怎么实现呢？

icon标签有个color属性，可以设置icon的颜色，大家也看到了，我们设置的数组叫color，但其实数据是瞎编的，因为没啥用，这时候，我们就要在数组内放入颜色信息，然后当循环的时候，让icon的color属性等于数组内的值就好了（也就是color属性绑定颜色数组，而不是像我们前面的例子，用icon或者view），我们来看实现：

js：

界面这样写：

[code]<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是默认的，但是二维数组我们有内外两层，为了避免混淆我们给内层的起个别名。这里很重要，稍微有些复杂，大家要自行理解下，会影响到后面的内容。我们来看下结果：

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

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

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

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

 

 

 

 

后记：

文章重审，括号内的内容是添加的，最后一段除外。

阅读更多