web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理

web-app uniapp监测屏幕大小的变化对数组一行展示数据作相应处理

1.uni.getSystemInfoSync().screenWidth; 获取屏幕宽度
2.uni.onWindowResize（） 实时监测屏幕宽度变化
3.根据宽度的大小拿到每行要展示的数量itemsPerRow
4.为了确保样式能够根据 itemsPerRow 动态调整，可以使用 CSS 变量或动态类。width: calc((100% - 40rpx * (itemsPerRow - 1)) / itemsPerRow);

<template><view class="index"><!-- list表单 --><view class="activityList"><view class="innerContent"><!-- conent-list --><view class="content-list"><view class="list-row" v-for="(row, rowIndex) in groupedCollectionList" :key="rowIndex"><view class="list-item" v-for="(item, index) in row" :key="index" @click="goDetail(item)"><view class="item-left" v-if="item.picture"><image class="img" :src="item.picture" /></view><view class="item-right"><view class="title space" v-if="item.name.length > 10">{{ item.name.slice(0, 10) }}...</view><view class="title space" v-else>{{ item.name }}</view><view class="title space">{{ item.createdTime }}</view></view></view></view></view></view></view></view></template><script>
export default {data() {return {list:[],itemsPerRow:1,// 默认每行显示1个};},computed: {// 在 computed 中添加 groupedCollectionList 以根据 itemsPerRow 分组数据。groupedCollectionList() {const rows = [];for (let i = 0; i < this.list.length; i += this.itemsPerRow) {rows.push(this.list.slice(i, i + this.itemsPerRow));}return rows;},},beforeMount() {this.updateScreenSize(); //初始化屏幕宽度uni.onWindowResize(this.updateScreenSize);  // 监听屏幕尺寸变化},beforeDestroy() {uni.offWindowResize(this.updateScreenSize);  // 移除监听器},methods: {// 获取当前屏幕宽度getScreenWidth() {return uni.getSystemInfoSync().screenWidth;},updateScreenSize(){const width = this.getScreenWidth()console.log(width,'width');// 562<width&&width<687if (width > 640) {this.itemsPerRow = 3;} else if (562<width&&width < 640) {this.itemsPerRow = 2;} else {this.itemsPerRow = 1;}},getList() {// this.$modal.loading("加载中..");this.list = [{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试1",createdTime:"2025-1-1"},{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试2",createdTime:"2025-1-1"},{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试3",createdTime:"2025-1-1"},{picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",name:"测试4",createdTime:"2025-1-1"}]},},async onLoad(e) {const { id }  = ethis.id = id},onShow() {this.pageNum = 1;this.getList();},};
</script><style lang="scss" scoped>
.index {width: 100%;min-height: 100vh;background: #f7f8fc;box-sizing: border-box;padding-bottom: calc(110rpx + env(safe-area-inset-bottom));.activityList {width: 100%;padding: 0 20rpx;padding-top: 24rpx;.innerContent {width: 100%;background: #ffffff;border-radius: 20rpx;padding: 20rpx;.content-list {padding: 20rpx;padding-right: 0rpx;.list-row {display: flex;justify-content: space-between;margin-bottom: 20rpx;}.list-item {// 确保样式能够适应不同数量的每行显示。width: calc((100% - 40rpx * (itemsPerRow - 1)) / itemsPerRow);height: 152rpx;display: flex;margin-bottom: 20rpx;.item-left {width: 270rpx;height: 152rpx;border-radius: 10rpx;position: relative;.img {width: 270rpx;height: 152rpx;border-radius: 10rpx;}}.item-right {flex: 1;padding: 10rpx 0rpx;display: flex;flex-direction: column;justify-content: space-between;width: 200rpx;padding-left: 20rpx;.title {font-size: 30rpx;font-family: PingFang SC, PingFang SC-Regular;font-weight: Regular;text-align: left;color: #333333;line-height: 41rpx;}.title.space {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}}}}
}
</style>