列表渲染与条件渲染

条件渲染"/>

列表渲染与条件渲染

作者 | 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！

这是一个有质量，有态度的博客