小程序循环wx:for基础使用

无论是网站,还是小程序,所有一切涉及数据的问题。都不可避免的要接触到关于数据循环的问题。那么在微信小程序中我们如何对数据进行循环处理呢?

开始之前,我们先列举出常用的数据格式:

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>

关于循环的大致就这么多!希望对你有所帮助!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!