uniapp下拉加载图片

在UniApp中，可以使用uni-scroll-view组件实现下拉加载图片的效果。下面是一个简单的示例代码：

<template>
  <view>
    <uni-scroll-view class="scroll-view" :enable-back-to-top="true" @scrolltolower="loadMore">
      <view class="image-list">
        <view v-for="(item, index) in imageList" :key="index" class="image-item">
          <image :src="item.url" mode="aspectFill"></image>
        </view>
      </view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [], // 图片列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数量
    };
  },
  methods: {
    loadMore() {
      // 模拟异步加载数据
      setTimeout(() => {
        // 假设从服务器获取到新的图片数据
        const newImages = [
          { url: 'https://example.com/image1.jpg' },
          { url: 'https://example.com/image2.jpg' },
          { url: 'https://example.com/image3.jpg' },
          // ...
        ];
        this.imageList = this.imageList.concat(newImages);
        this.page++;
      }, 1000);
    },
  },
};
</script>

<style>
.scroll-view {
  height: 100vh;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-item {
  width: calc(50% - 10px);
  margin-bottom: 10px;
}
</style>

上述代码中，使用了uni-scroll-view组件作为滚动容器，通过监听scrolltolower事件来触发加载更多的操作。在loadMore方法中，可以进行异步请求获取新的图片数据，并将其追加到imageList数组中，实现下拉加载图片的效果。