爆笑讲解小程序开发之循环渲染

欢迎点击观看我的视频

循环渲染是啥?知道你是写代码的,可在这里你总得讲点人话吧。行,行行。那听你的,循环渲染就是把一堆数据挨个显示在小程序页面上,这个,嗯,是讲明白了,可你讲这个有什么用呢?嘿嘿,这个技能啊,可以帮助你把自己的商品展示到小程序页面里面,是您实现小程序开发自由的一小步啊,继续学下去,实现一个小目标也是指日可待啊。
那么要怎么做呢?好,那么今天,我们就说道说道这个循环渲染。

内容包括啥呢,首先还是照例,先来剖析剖析这个程序员的黑话体系,要展示这个一堆数据在小程序上面,我们得事先准备一些数据,在哪里准备呢,哎呀,就在这个js文件里面塞上这些个数据啊,如果用黑话表达,就是申明数据。而这个数据的类型呢,无外乎数组或者列表。有人问啦,这个数组和列表有啥区别呢,一句话解释一下啊,列表就是复杂一点的数组。
然后呢,我们就要在这个wxml文件里面做渲染了,这次是循环渲染,所以要用到一些循环的控制属性wx:for以及wx:key来实现循环展示这些数据。
具

体怎么做呢,我们接着往下看,

我们首先在js文件中的data里面放上一个数组,里面塞上三个东西苹果,橘子以及香蕉,哎,都是大家平时爱吃的水果,给它起个名字叫arr1
下面呢安排一个列表arr2,里面放上一个id,以及对应的name,依次为黄瓜,胡萝卜,土豆。哎,下面这种结构就是个列表,看上去比上面的数组复杂一点点。但是不要怕,以后见多了,你也就习惯了。

然后我们在wxml文件里面干啥呢,哎,放上两个view组件。
我们把刚才在js文件里面准备好的东西渲染或者用人话说就是展示到小程序上。注意了,我们要把这个wx:for属性给用上,等于号后面跟着的是双引号下面的双大括号,这个是以前我们讲过的mustache语法,我们把数组以及列表的名字安排上,arr1和arr2,后面呢我们要跟上一个wx:key属性,这个呢是微信开发的强制性规定,用来提高循环性能的,对于数组呢,我们就用默认的index,对于列表呢,我们就把其中一项的名字放上去就行了,注意了这里不能用mustache语法了,用引号就可以了。
另一个注意点呢,就是每个循环项得用item表示,如果只是数组,你就用item好了,如果是列表,你要展示,就得在item后面加上具体的名字,比如id,你的用item.id,比如name,你的用item.name
好了知识点讲到这里,我们打开微信开发者工具,来实际运用一下啊。
欢迎点击观看我的视频

OK今天的课程,主要就是讲这个循环渲染的实现,有了这个,您就能把自己的东西展示在微信小程序上面了,如果您满意的话,那就请您动动发财的手指点个赞,支持一下吧,好了,拜了个拜,下回见!
