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

1. <template>
2.     <view class="index">
3.       <!-- list表单 -->
4.       <view class="activityList">
5.         <view class="innerContent">
6.           <!-- conent-list -->
7.           <view class="content-list">
8.             <view class="list-row" v-for="(row, rowIndex) in groupedCollectionList" :key="rowIndex">
9.               <view class="list-item" v-for="(item, index) in row" :key="index" @click="goDetail(item)">
10.                 <view class="item-left" v-if="item.picture">
11.                   <image class="img" :src="item.picture" />
12.                 </view>
13.                 <view class="item-right">
14.                   <view class="title space" v-if="item.name.length > 10">{{ item.name.slice(0, 10) }}...</view>
15.                   <view class="title space" v-else>{{ item.name }}</view>
16.                   <view class="title space">{{ item.createdTime }}</view>
17.                 </view>
18.               </view>
19.             </view>
20.           </view>
21.         </view>
22.       </view>
23.     </view>
24.   </template>
26. <script>
27. export default {
28.     data() {
29.         return {
30.             list:[],
31.             itemsPerRow:1,// 默认每行显示1个
32.         };
33.     },
34.     computed: {
35.         // 在 computed 中添加 groupedCollectionList 以根据 itemsPerRow 分组数据。
36.         groupedCollectionList() {
37.             const rows = [];
38.             for (let i = 0; i < this.list.length; i += this.itemsPerRow) {
39.             rows.push(this.list.slice(i, i + this.itemsPerRow));
40.             }
41.             return rows;
42.         },
43.     },
44.     beforeMount() {
45.         this.updateScreenSize(); //初始化屏幕宽度
46.         uni.onWindowResize(this.updateScreenSize);  // 监听屏幕尺寸变化
47.     },
48.     beforeDestroy() {
49.        uni.offWindowResize(this.updateScreenSize);  // 移除监听器
50.     },
51.     methods: {
52.         // 获取当前屏幕宽度
53.         getScreenWidth() {
54.         return uni.getSystemInfoSync().screenWidth;
55.         },
56.         updateScreenSize(){
57.             const width = this.getScreenWidth()
58.             console.log(width,'width');
59.             // 562<width&&width<687
60.             if (width > 640) {
61.                 this.itemsPerRow = 3;
62.             } else if (562<width&&width < 640) {
63.                 this.itemsPerRow = 2;
64.             } else {
65.                 this.itemsPerRow = 1;
66.             }
67.         },
68.         getList() {
69.             // this.$modal.loading("加载中..");
70.             this.list = [{
71.                 picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",
72.                 name:"测试1",
73.                 createdTime:"2025-1-1"
74.             },
75.             {
76.                 picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",
77.                 name:"测试2",
78.                 createdTime:"2025-1-1"
79.             },
80.             {
81.                 picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",
82.                 name:"测试3",
83.                 createdTime:"2025-1-1"
84.             },
85.             {
86.                 picture:"https://jis-eclass.oss-accelerate.aliyuncs.com/images/Course/20250108/20250108141759a888cbd5-8dec-4b98-a423-30d1f2081023.jpg",
87.                 name:"测试4",
88.                 createdTime:"2025-1-1"
89.             }
90.         ]
91.         },
92.     },
93.     async onLoad(e) {
94.         const { id }  = e
95.         this.id = id
96.     },
97.     onShow() {
98.         this.pageNum = 1;
99.         this.getList();
100.     },
103. };
104. </script>
106. <style lang="scss" scoped>
107. .index {
108.   width: 100%;
109.   min-height: 100vh;
110.   background: #f7f8fc;
111.   box-sizing: border-box;
112.   padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
114.   .activityList {
115.     width: 100%;
116.     padding: 0 20rpx;
117.     padding-top: 24rpx;
119.     .innerContent {
120.       width: 100%;
121.       background: #ffffff;
122.       border-radius: 20rpx;
123.       padding: 20rpx;
125.       .content-list {
126.         padding: 20rpx;
127.         padding-right: 0rpx;
129.         .list-row {
130.           display: flex;
131.           justify-content: space-between;
132.           margin-bottom: 20rpx;
133.         }
135.         .list-item {
136.           // 确保样式能够适应不同数量的每行显示。
137.           width: calc((100% - 40rpx * (itemsPerRow - 1)) / itemsPerRow);
138.           height: 152rpx;
139.           display: flex;
140.           margin-bottom: 20rpx;
142.           .item-left {
143.             width: 270rpx;
144.             height: 152rpx;
145.             border-radius: 10rpx;
146.             position: relative;
148.             .img {
149.               width: 270rpx;
150.               height: 152rpx;
151.               border-radius: 10rpx;
152.             }
153.           }
155.           .item-right {
156.             flex: 1;
157.             padding: 10rpx 0rpx;
158.             display: flex;
159.             flex-direction: column;
160.             justify-content: space-between;
161.             width: 200rpx;
162.             padding-left: 20rpx;
164.             .title {
165.               font-size: 30rpx;
166.               font-family: PingFang SC, PingFang SC-Regular;
167.               font-weight: Regular;
168.               text-align: left;
169.               color: #333333;
170.               line-height: 41rpx;
171.             }
173.             .title.space {
174.               white-space: nowrap;
175.               overflow: hidden;
176.               text-overflow: ellipsis;
177.             }
178.           }
179.         }
180.       }
181.     }
182.   }
183. }
184. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。