当前位置：首页 > news >正文

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

news 2025/8/31 20:42:56

推荐学习文档
- golang应用级os框架，欢迎star
- golang应用级os框架使用案例，欢迎star
- 案例：基于golang开发的一款超有个性的旅游计划app经历
- golang实战大纲
- golang优秀开发常用开源库汇总
- 想学习更多golang知识，这里有免费的golang学习笔记专栏

文章目录

- 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();
}