微信小程序|列表渲染-for循环 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序|列表渲染-for循环

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:52

问题描述

大家学习程序设计都知道for循环,而且很多编程都需要用到 for 循环。在制作微信小程序特别是列表页面的时候,是否有遇到过列表元素很多或者不确定的情况,如果一个一个的去敲就会有很大的工作量非常的麻烦。那么可不可以用 for 循环来解决这个问题呢?

解决方案

编程的人都知道for循环是一种循环语句。当元素的数量很多的时候,用 for 循环来遍历元素解决一些问题就显得非常的方便。微信小程序也一样,大家通常看到的一些列表页面都是由很多的元素组成的,如果一个框框一个框框的去写代码效率就特别低了。但是用小程序中 wxfor 属性就可以实现对列表的快速渲染了。

代码实现:

在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循环对列表进行渲染非常的方便而且很灵活。这次的列表渲染需要理解 itemindex 两个循环控制变量以及 wxfor 属性。另外对页面元素的调整布局也很重要,要让页面看起来美观。

相关案例查看更多