作者 | Jeskson
来源 | 达达前端小酒馆
列表渲染与条件渲染
如何渲染数组类型和对象类型的数据
渲染数组⾥的所有数据
相同的结构是列表渲染的前提，列表等都会有⼏千上万条的数据，它们的共同的特征就是数据的结构相同。
data: {
newstitle:[
"幸咖啡",
"腾：年",
"总投资20亿元",
"京数量同⽐增⻓163%",
"腾超五千万",
],
}
如何把整个列表都渲染出来呢？
<view wx:for="{{newstitle}}" wx:key="*this">
{{item}} </view>
wx:for=”{{newstitle}}”，就是在数组newstitle⾥进⾏循环
*this代表在 for 循环中的 item 本身，⽽{{item}}的item是默认的
<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
{{title}} </view>
默认数组的当前项的下标变量名默认为 index
数组当前项的变量名默认为 item，wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当 前下标的变量名
电影列表⻚⾯
movies: [{
name: "肖申克的救赎",
img:"httpsublic/p480bp",
desc:"有的⼈的⽻翼是如此光辉，即使世界上最⿊暗的牢狱，也⽆法⻓久地将他围困！"},
{
name: "霸王别姬",
img: "https://ic/pwebp",
desc: "⻛华绝代。"
},
{
name: "⾟德勒名单",
img: "https:/",
desc: "拯救⼀个⼈，就是拯救整个世界。"
},
],
<view class="page__bd">
<view class="weui-panel weui-panel_access">
<view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movi
es" wx:key="*item">
<navigator url="" class="weui-media-box weui-media-box_appmsg"
hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appm
sg">
<image class="weui-media-box__thumb" mode="widthFix" s
rc="{{movies.img}}" sytle="height:auto"></image>
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appm
sg">
<view class="weui-media-box__title">{{movies.name}}</v
iew>
<view class="weui-media-box__desc">{{movies.desc}}</vi
ew>
</view>
</navigator>
</view>
</view>
</view>
图⽚样式
图⽚的模式mode，图⽚的模式默认为scaleToFill，也就 是不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素
希望图⽚保持宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
⽤到widthFix 的模式
<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}"
.weui-media-box__hd_in-appmsg{
height: auto;
}
Grid九宫格样式
<view class="page__bd">
<view class="weui-grids">
<block wx:for="{{grids}}" wx:for-item="grid" wx:key="*this">
<navigator url="" class="weui-grid" hover-class="weui-grid_act
ive">
<image class="weui-grid__icon" src="{{grid.imgurl}}" />
<view class="weui-grid__label">{{grid.title}}</view>
</navigator>
</block>
</view>
</view>
grids:[
{ imgurl:"https:",
title:"2"
},
{
imgurl: "https:",
title: "1"
},
]
List样式
<view class="weui-cells weui-cells_after-title">
<block wx:for="{{listicons}}" wx:for-item="listicons">
<navigator url="" class="weui-cell weui-cell_access" hover-class=
"weui-cell_active">
<view class="weui-cell__hd">
<image src="{{listicons.icon}}" style="margin-right: 5px;v
ertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">{{listicons.title}}</view>
<view class="weui-cell__ft weui-cell__ft_in-access">{{listicon
s.desc}}</view>
</navigator>
</block>
</view>
listicons:[{
icon:"https:"
title:"我的⽂件",
desc:""
},
{
icon:"https:"
title:"我的收藏",
desc:"收藏列表"
},
{
icon:"https:"
title:"我的邮件",
desc:""
}
],
❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]
作者Info：
【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【转载说明】：转载请说明出处，谢谢合作！~
关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的CSDN！
这是一个有质量，有态度的博客
