条件渲染"/>
列表渲染与条件渲染
作者 | 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!
这是一个有质量,有态度的博客
更多推荐
列表渲染与条件渲染
发布评论