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

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

从这篇开始，做个简单的选座系统，也就是在界面上画出座位布局，在点击后根据座位情况进行选座或者离坐这么个东西。

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

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

首先，画出座位布局，然后绑定点击事件，最后动态生成布局。

期间的一些思路我会详谈，因为在我看来，能写出来本身就是缘分，运气好罢了，在来回的试探中皮。

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

怎样画？

我们知道在开发者文档中，给了我们许多的画图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--...........。好方法！手动大拇哥，这种叫做有文化的莽夫，但是上面的问题解决不了，界面还是死的。）

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

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

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里面编个数组：

界面我们这样写：

<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绑定这个一维数组，然后输出。我们来看结果：（解释的好像不清，但好想也不能解释的再清楚了，我觉得主要的理解在item。仔细看看开发者文档，把item的具体含义搞清~~【注：不要急于求成，一定要去看】）

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

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

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

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

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

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

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

后记：

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

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

基于微信小程序电影院选座订票系统计算机毕设源码26840
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,电影院选座订票系统小程序被用户普遍使用,为方 ...
微信小程序影院选座界面前后端
选座界面使用了组件开发,在seat页面里引入seatList组件.因为不想再去看怎么从组件中获取数据,因此这整个页面就是一个组件... 本文前端部分参考于:微信小程序组件开发--可视化电影选座 - ...
ssm+java+vue基于微信小程序的电影院票务系统（可选座评论等功能）#毕业设计
随着移动应用技术的发展,越来越多的用户借助于移动手机.电脑完成生活中的事务,许多的传统行业也更加重视与互联网的结合,由于城镇人口的增加,人们去电影院总是排着长长的队伍,对于时间紧的人是一个非常头痛的事 ...
（附源码）springboot基于微信小程序的校园外卖系统毕业设计091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
springboot基于微信小程序的校园外卖系统毕业设计源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
springboot基于微信小程序的校园外卖系统毕业设计-附源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
医院挂号小程序,预约挂号小程序,微信小程序医院预约挂号系统毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序医院预约挂号系统,前台用户使用小程序,后台管理使用基Java+MySql技术:通过后台设置医院信息.录入医院科室信息.录入医生信息 ...
基于微信小程序的体育课评分系统小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
计算机毕业设计：基于微信小程序的校园求职系统
开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea ...

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

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

最新文章

热门文章