devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序云开发（十二）：列表渲染_云开发小程序for循环渲染

作者：Cpp五条 | 2024-02-16 14:18:00

赞

踩

云开发小程序for循环渲染

在数据绑定中学习了如何渲染数组类型和对象类型的数据，但是当时只是输出了数组里或对象的数组里的某一个数据，如果是要输出整个列表呢？这个时候就需要用到列表渲染啦。

1 渲染数组里的所有数据

相同的结构是列表渲染的前提，在实际的开发场景里，商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据，他们都有一个共同的特征就是数据的结构相同，这也是我们可以批量化渲染的前提。还是以前面的互联网快讯的数据为例，下面的新闻标题他们的结构就非常单一。

  1. data: {
  2.   newstitle:[
  3.     "瑞幸咖啡：有望在三季度达到门店运营的盈亏平衡点",
  4.     "腾讯：广告高库存量还是会持续到下一年",
  5.     "上汽集团云计算数据中心落户郑州，总投资20亿元",
  6.     "京东：月收入超2万元快递小哥数量同比增长163%",
  7.     "腾讯：《和平精英》日活跃用户已超五千万",
  8.   ],
  9. }

那我们应该如何把整个列表都渲染出来呢？这里涉及到JavaScript数组遍历的知识，JavaScript数组遍历的方法非常多，因此小程序数组的渲染也有很多方法，所以大家看技术文档的时候会有点混乱。

技术文档：列表索引

  1. <view wx:for="{{newstitle}}" wx:key="*this">
  2.   {{item}}
  3. </view>

这里wx:for=”{{newstitle}}”，也就是在数组newstitle里进行循环，*this 代表在 for 循环中的 item 本身，而{{item}}的item是默认的。也可以使用如下方法：

  1. <view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  2.   {{title}}
  3. </view>

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

2 电影列表页面

首先我们把多部电影的数据写在data里面，相当于是一个数组类型的数据里面，包含着多个对象类型的数据。

  1. movies: [{
  2.   name: "肖申克的救赎", 
  3.   img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
  4.   desc:"有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！"},
  5.   {
  6.     name: "霸王别姬",
  7.     img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
  8.     desc: "风华绝代。"
  9.   },
  10.   {
  11.     name: "这个杀手不太冷",
  12.     img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.webp",
  13.     desc: "怪蜀黍和小萝莉不得不说的故事。"
  14.   },
  15.   {
  16.     name: "阿甘正传",
  17.     img: "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.webp",
  18.     desc: "一部美国近现代史。"
  19.   },
  20.   {
  21.     name: "美丽人生",
  22.     img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.webp",
  23.     desc: "最美的谎言。"
  24.   },
  25.   {
  26.     name: "泰坦尼克号",
  27.     img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.webp",
  28.     desc: "失去的才是永恒的。"
  29.   },
  30.   {
  31.     name: "千与千寻",
  32.     img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1606727862.webp",
  33.     desc: "最好的宫崎骏，最好的久石让。"
  34.   },
  35.   {
  36.     name: "辛德勒名单",
  37.     img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p492406163.webp",
  38.     desc: "拯救一个人，就是拯救整个世界。"
  39.   },     
  40. ],

然后我们也把数据绑定章节的代码改一下，添加一个wx:for语句，来把列表里的数据给循环渲染出来。

  1. <view class="page__bd">
  2. 	<view class="weui-panel weui-panel_access">
  3. 		<view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movies" wx:key="*item">
  4. 			<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
  5. 				<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
  6. 					<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}" sytle="height:auto"></image>
  7. 				</view>
  8. 				<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
  9. 					<view class="weui-media-box__title">{{movies.name}}</view>
  10. 					<view class="weui-media-box__desc">{{movies.desc}}</view>
  11. 				</view>
  12. 			</navigator>
  13. 		</view>
  14. 	</view>
  15. </view>

这里用到了一个wx:for-item，给了它一个值是movies，其实也可以是其他值，比如dianying，那{{movies.img}}、{{movies.name}}、{{movies.desc}}也相应的为{{dianying.img}}、{{dianying.name}}、{{dianying.desc}}。为什么这样？这个也是JavaScript的一个知识，可以先不必深究。

我们发现电影列表里面的图片是变形的，为什么呢？回到我们之前学的image组件，我们去查看一下image组件文档，从技术文档里找答案。

技术文档：image组件文档

在技术文档里，我们发现如果我们不写图片的模式mode，图片的模式默认为scaleToFill，也就是不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

那我们希望图片保持宽度不变，高度自动变化，保持原图宽高比不变，那就需要用到widthFix的模式啦。

我们给image组件添加widthFix模式，

<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}"

添加完模式之后，发现图片比例显示正常了，但是image组件出现了溢出的现象，这是因为weui给class为weui-media-box__hd_in-appmsg 的组件定义了一个height:60px的css样式，也就是限制了高度，那我们可以在home.wxss里添加

  1. .weui-media-box__hd_in-appmsg{
  2.   height: auto;
  3. }

把这个height:60px给覆盖掉。

css的覆盖原理是按照优先级来的，越是写在css文件后面的样式优先级越高，会把前面的给覆盖掉；在小程序里页面里的wxss的优先级比app.wxss的优先级更高，所以也可以覆盖掉。

点击电影列表是没有链接的，大家可以回顾前面的知识点，给每部电影添加链接，在pages配置项里把每个页面的路径都添加上。

3 Grid九宫格样式参考

大家经常会在App里看到一些分类都是以九宫格的方式来布局的。我们在WeUI小程序里用模拟器找到基础组件下的grid，看一下grid所呈现的样式。然后参考WeUI小程序文件结构里example文件夹下grid页面文件grid.wxml里的代码，在home.wxml里添加代码：

  1. <view class="page__bd">
  2. 	<view class="weui-grids">
  3. 		<block wx:for="{{grids}}" wx:for-item="grid" wx:key="*this">
  4. 			<navigator url="" class="weui-grid" hover-class="weui-grid_active">
  5. 				<image class="weui-grid__icon" src="{{grid.imgurl}}" />
  6. 				<view class="weui-grid__label">{{grid.title}}</view>
  7. 			</navigator>
  8. 		</block>
  9. 	</view>
  10. </view>

在WeUI的源代码里，我们看到有一个的标签，这个标签主要是说明里面包含的是一个多节点的结构块，换成组件也没有太大影响，就好像换成没有影响一样，用不同的组件主要是为了一个区分。

然后在home.js添加data数据

  1. grids:[
  2.   { imgurl:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon1.png",
  3.     title:"招聘"
  4.   },
  5.   {
  6.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon2.png",
  7.     title: "房产"
  8.   },
  9.   {
  10.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon3.png",
  11.     title: "二手车新车"
  12.   },
  13.   {
  14.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon4.png",
  15.     title: "二手"
  16.   },
  17.   {
  18.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon5.png",
  19.     title: "招商加盟"
  20.   },
  21.   {
  22.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon6.png",
  23.     title: "兼职"
  24.   },
  25.   {
  26.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon7.png",
  27.     title: "本地"
  28.   },
  29.   {
  30.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon8.png",
  31.     title: "家政"
  32.   },
  33.   {
  34.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon9.png",
  35.     title: "金币夺宝"
  36.   },
  37.   {
  38.     imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon10.png",
  39.     title: "送现金"
  40.   },
  41. ]

大家就可以看到一个很多App界面都有的一个九宫格了。这里的九宫格是一行三列，如何让九宫格变成一行五列呢？首先我们要知道为什么这个九宫格会变成一行三列，在weui.wxss里给weui-grid定义了一个width:33.33333333%的样式，我们可以在home.wxss里添加一个样式来覆盖原有的宽度。

  1. .weui-grid{
  2.   width: 20%;
  3. }

4 List样式参考

大家可以先在开发者工具的模拟器里体验一下WeUI小程序表单下面的List的样式，以及找到list样式所对应的wxml代码，在开发者工具的文件目录的example/list目录下。我们可以参考一下里面的代码，并结合前面的案例在home.wxml里面输入以下代码：

  1. <view class="weui-cells weui-cells_after-title">
  2. 	<block wx:for="{{listicons}}" wx:for-item="listicons">
  3. 		<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  4. 			<view class="weui-cell__hd">
  5. 				<image src="{{listicons.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  6. 			</view>
  7. 			<view class="weui-cell__bd">{{listicons.title}}</view>
  8. 			<view class="weui-cell__ft weui-cell__ft_in-access">{{listicons.desc}}</view>
  9. 		</navigator>
  10. 	</block>
  11. </view>

在home.js的data里添加以下数据：

  1. listicons:[{
  2.   icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons1.png",
  3.   title:"我的文件",
  4.   desc:""
  5. },
  6. {
  7.   icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons2.png",
  8.   title:"我的收藏",
  9.   desc:"收藏列表"
  10. },
  11. {
  12.   icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons3.png",
  13.   title:"我的邮件",
  14.   desc:""
  15. }],

再来查看效果，这里第一个和第三个的desc没有写内容，也是不影响这个列表展示的。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/94169
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号