美文网首页
遍历行,实现一行两列

遍历行,实现一行两列

作者: 空我我 | 来源:发表于2023-02-01 11:45 被阅读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'
                        }
                    ],
    

    相关文章

      网友评论

          本文标题:遍历行,实现一行两列

          本文链接:https://www.haomeiwen.com/subject/ehdihdtx.html