uniapp view怎么按长度排列一行最多四个元素，并且换行后，每一行之间都有间隔

GoppViper

于 2024-10-07 14:21:49 发布

阅读量843

点赞数 9

分类专栏：前端文章标签： uni-app 前端 uniapp 样式控制样式

本文链接：https://blog.csdn.net/woaijssss/article/details/142740099

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

推荐学习文档

文章目录

- 1.使用 Flex 布局并设置间距
- 2.动态根据内容长度排列（可选补充）

1.使用 Flex 布局并设置间距

在uniapp中，可以利用flex布局来实现view按要求排列。以下是一个示例代码：
模板部分（template）：

<template>
    <view class="parent-view">
        <view v-for="(item, index) in itemList" :key="index" class="child-view">{{item}}</view>
    </view>
</template>

脚本部分（script）（这里简单定义一个示例数据数组）：

export default {
    data() {
        return {
            itemList: ['元素1', '元素2', '元素3', '元素4', '元素5', '元素6']
        };
    },
};

样式部分（style）：

.parent-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px; /* 设置元素之间的间距，这里是10px，可以根据需求调整 */
}

.child-view {
    width: calc(25% - 10px); /* 考虑间距后每个元素的宽度，这里假设父容器宽度为100% */
    box-sizing: border-box;
    background-color: #f0f0f0; /* 可根据需求添加背景色等样式 */
    padding: 5px; /* 元素内部的间距，可调整 */
}

在上述代码中，parent - view类使用flex - wrap: wrap来实现换行，justify - content: flex - start使元素左对齐（如果需要其他对齐方式可以修改），gap: 10px设置了元素之间的间距。child - view类中计算了每个元素的宽度，考虑了间距因素，同时设置了一些基本的样式。

2.动态根据内容长度排列（可选补充）

如果想要根据内容的实际长度（例如文本长度）动态调整排列，并且满足每行最多四个元素和换行有间隔的要求，可以使用uni.createSelectorQuery()来获取每个view元素的宽度，然后进行动态布局调整。
以下是一个大致的示例思路（在mounted生命周期钩子中）：

mounted() {
    const that = this;
    const query = uni.createSelectorQuery().in(this);
    query.selectAll('.child - view').boundingClientRect(data => {
        let items = that.itemList;
        let line = [];
        let lines = [];
        let currentWidth = 0;
        let maxWidthPerLine = uni.getSystemInfoSync().windowWidth;
        let gap = 10; /* 元素之间的间距，与CSS中的设置一致 */
        for (let i = 0; i < data.length; i++) {
            let itemWidth = data[i].width;
            if (currentWidth+itemWidth <= maxWidthPerLine && line.length < 4) {
                line.push(items[i]);
                currentWidth += itemWidth + gap;
            } else {
                lines.push(line);
                line = [items[i]];
                currentWidth = itemWidth + gap;
            }
        }
        if (line.length > 0) {
            lines.push(line);
        }
        // 这里可以根据lines重新渲染视图，例如更新数据结构或者使用v - if/v - for组合来正确显示布局
    }).exec();
}