遍历行,实现一行两列

微信图片_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'
                    }
                ],
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容