uniapp view怎么按长度排列一行最多四个元素，并且换行后，每一行之间都有间隔
- 推荐学习文档
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();
}
这种方式通过获取每个view元素的实际宽度，按照每行最多四个元素和间距要求进行分组，然后可以根据分组结果进一步调整布局。不过这种方法相对复杂一些，并且在内容动态变化时可能需要重新计算布局。
希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。
关注我看更多有意思的文章哦！👉👉
原文地址：https://blog.csdn.net/woaijssss/article/details/142740099
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！