微信小程序(三):选座系统(主要内容:列表渲染的应用)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接: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--...........。 好方法!手动大拇哥,这种叫做有文化的莽夫,但是上面的问题解决不了,界面还是死的。)

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

入口:框架--视图层--列表渲染(开发者文档路径)

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上写博客的时候,不要用输入法往里面打表情,之后的东西都会没的。这就是为什么这篇文章发了三遍的原因,手疼,哭)

 

 

 

 

后记:

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

展开阅读全文

没有更多推荐了,返回首页