更新记录

0.9（2025-02-10） 下载此版本

布局结构：

使用scroll-view实现滚动容器

双列布局通过display: flex + flex-wrap: wrap配合width: 50%实现

每个列表项包含图片和文字上下排列

核心功能：

懒加载：通过scroll-view的@scrolltolower事件监听触底

图片懒加载：使用image组件的lazy-load属性

分页加载：通过page/pageSize参数控制分页

状态提示：包含加载中和没有更多数据的提示

交互增强：

图片点击支持预览（uni.previewImage）

图片加载使用占位背景色

图片模式为aspectFill保持比例填充容器

平台兼容性

示例

基础使用

<template>
  <view class="page-container">
    <media-list 
      :initialData="defaultData"
      :pageSize="8"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始示例数据
      defaultData: [
        {
          image: '/static/cover1.jpg',
          text: '夏日海滩风景'
        },
        {
          image: '/static/cover2.jpg',
          text: '雪山星空摄影'
        }
      ]
    }
  }
}
</script>

<style>
.page-container {
  padding: 20rpx 0;
}
</style>