web-app uniapp监测屏幕大小的变革对数组一行展示数据作相应处理
web-app uniapp监测屏幕大小的变革对数组一行展示数据作相应处理https://i-blog.csdnimg.cn/direct/304faf8bbf7346b7810dc6c4b8531e6d.png
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<687
if (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 }= e
this.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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]