问题描述 大家学习程序设计都知道for循环,而且很多编程都需要用到for循环。在制作微信小程序特别是列表页面的时候,是否有遇到过列表元素很多或者不确定的情况,如果一个一个的去敲就会有很大的工作量非常的麻烦。那么可不可以用for循环来解决这个问题呢? 解决方案 编程的人都知道for循环是一种循环语句。当元素的数量很多的时候,用for循环来遍历元素解决一些问题就显得非常的方便。微信小程序也一样,大家通常看到的一些列表页面都是由很多的元素组成的,如果一个框框一个框框的去写代码效率就特别低了。但是用小程序中wx:for属性就可以实现对列表的快速渲染了。 代码实现: 在js 中对页面内容定义各种数据构成一个对象数组; novel是对该组数据的命名。
在wxml中对页面进行渲染,将绑定的数据输出到视图中; wx:for="{{}}"属性:实现视图层for循环的控制结构; 使用for循环就需要将之前定义的: {{novel.name}}、{{novel.comment}}、{{novel.imagepath}} 改为 {{item.name}}、{{item.comment}}、{{item.imagepath}},item为一个抽象的循环控制变量。如果不需要遍历所有的数据那么就在之前定义的{{novel[1].~~}}中加一个索引(你需要第几位就加第几位的索引); {{index+1}}:循环控制变量。
在wxss中对页面元素进行布局。
效果图: 结语 在微信小程序中使用for循环对列表进行渲染非常的方便而且很灵活。这次的列表渲染需要理解item和index两个循环控制变量以及wx:for属性。另外对页面元素的调整布局也很重要,要让页面看起来美观。 主 编 | 王文星 责 编 | 江汪霖 where2go 团队 |
|