小程序循环wx:for基础使用
小程序
2018-10-05 16:23:37
无论是网站,还是小程序,所有一切涉及数据的问题。都不可避免的要接触到关于数据循环的问题。那么在微信小程序中我们如何对数据进行循环处理呢?
开始之前,我们先列举出常用的数据格式:
data:["数据1","数据2","数据3"] data1:[ {name:"数据1"}, {name:"数据2"}, {name:"数据3"} ]
小程序中具体代码块:
wxml部分:(数组格式)
<view class=''> <block wx:for="{{data}}"> <text>{{item}}</text> </block> </view>
wxml部分:(数组包含json格式)
<view class=''> <block wx:for="{{data1}}"> <text>{{item.name}}</text> </block> </view>
从上面两部分代码,想必大家也看出了其中的不同了吧。
也就只是{{item}}和{{item.name}}的区别
item即数组当前项默认变量名!
wx:for即小程序中循环属性,小程序中wx:for多用在<block/>标签上!当然也可用在view标签上如:
<view class='list-li mflex' wx:for="{{list_data}}" wx:key="index" > <view class='list-img'><image src='{{item.imgUrl}}'></image></view> <view class='list-tit'><text>{{item.id}}、{{item.title}}</text></view> <view class='list-con'><text>单价{{item.unitprice}}元/m²</text></view> <view class='list-adr'><text>{{item.city}}</text></view> <view class='list-tag'> <text class='tag_{{index}}' wx:for="{{item.tag}}" wx:for-item="cell" wx:key="index" >{{cell.tags}}</text> </view> </view>
关于循环的大致就这么多!希望对你有所帮助!
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
880篇文章
2323人已阅读