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