微信小程序|列表渲染-for循环
发表时间：2021-1-5
发布人：葵宇科技
浏览次数：39
问题描述
大家学习程序设计都知道for循环，而且很多编程都需要用到 for 循环。在制作微信小程序特别是列表页面的时候，是否有遇到过列表元素很多或者不确定的情况，如果一个一个的去敲就会有很大的工作量非常的麻烦。那么可不可以用 for 循环来解决这个问题呢？
解决方案
编程的人都知道for循环是一种循环语句。当元素的数量很多的时候，用 for 循环来遍历元素解决一些问题就显得非常的方便。微信小程序也一样，大家通常看到的一些列表页面都是由很多的元素组成的，如果一个框框一个框框的去写代码效率就特别低了。但是用小程序中 wx ： for 属性就可以实现对列表的快速渲染了。
代码实现：
在js 中对页面内容定义各种数据构成一个对象数组；
novel是对该组数据的命名。
Page({
data: {
novel:[
{
name: " 《平凡的世界》 ",
comment: " 中国当代城乡社会生活的长篇小说 ",
imagePath: "/pages/img/ 小说 1.jpg"
},
{
name: " 《骆驼祥子》 ",
comment: " 优秀的现实主义小说 ",
imagePath: "/pages/img/ 小说 2.jpg"
},
{
name: " 《家》 ",
comment: " 入选 20 世纪中文小说 100 强（第 8 位） ",
imagePath: "/pages/img/ 小说 3.jpg"
},
{
name: " 《悲惨世界》 ",
comment: " 雨果现实主义小说中最成功的一部代表作 ",
imagePath: "/pages/img/ 小说 4.jpg"
},
]
}
})
在wxml中对页面进行渲染，将绑定的数据输出到视图中；
wx:for="{{}}" 属性：实现视图层 for 循环的控制结构；
使用for循环就需要将之前定义的
{{novel.name}} 、 {{novel.comment}} 、 {{novel.imagepath}}
改为 {{item.name}} 、 {{item.comment}} 、 {{item.imagepath}} ， item 为一个抽象的循环控制变量。 如果不需要遍历所有的数据那么就在之前定义的 {{novel[1].~~}} 中加一个索引（你需要第几位就加第几位的索引）；
{{index+1}}：循环控制变量。
<view>
<text > 小说推荐 </text>
<view wx:for="{{novel}}">
<image src="http://www.wxapp-union.com/{{item.imagePath}}"></image>
<view>
<text> 第 {{index+1}} 部： {{item.name}}</text>
<text> 评价： {{item.comment}}</text>
</view>
</view>
</view>
在wxss中对页面元素进行布局。
.container1{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.novel{
display: flex;
}
.novel-details{
display: flex;
flex-direction: column;
width: 500rpx
}
.novel-image{
width: 200rpx;
height: 200rpx
}
效果图：
结语
在微信小程序中使用for循环对列表进行渲染非常的方便而且很灵活。这次的列表渲染需要理解 item 和 index 两个循环控制变量以及 wx ： for 属性。另外对页面元素的调整布局也很重要，要让页面看起来美观。
