遍历行,实现一行两列
2023-02-01 本文已影响0人
空我我
微信图片_20230202112834.png
要实现这样的效果,用到了uView的u-row和u-col
<block v-for="(item,index) in list" :key="index" v-if="index%2==0">
<u-row customStyle="margin-bottom: 10px">
<u-col span="6">
<view>{{item.name }}</view>
</u-col>
<u-col span="6" v-if="index+1<list.length">
<view>{{ list[index+1].name}}</view>
</u-col>
</u-row>
</block>
- 'index % 2 == 0'中%一般为取余或者取模,这里是指只遍历能被2整除的项,也就是奇数项,展示的时候是通过list[index+1]来展示偶数项
list: [{
name: '1'
},
{
name: '2'
},
{
name: '3'
},
{
name: '4'
}, {
name: '5'
},
{
name: '6'
}
],