更新记录

0.0.3（2023-05-22）

• chore: 不支持vue2

0.0.2（2023-05-17）

• chore: 更新文档

0.0.1（2023-05-15）

• chore： 首次上传

平台兼容性

lime-waterfall 瀑布流

• 当前为初版 可能会有BUG
• 基于uniapp vue3
• Q群 1169785031

安装

• 在市场导入插件即可在任意页面使用，无须再import

使用

• 提供简单的使用示例，更多请查看下方的demo
• 插件有已知尺寸的布局和未知尺寸的布局，两种方式

已知尺寸

• 1、你知道图片的尺寸
• 2、你如果样式设置了包裹图片的padding，也需要传入
• 3、你如果有除了图片之外的内容容器，也必须传入高度

width-path：为图片在列表项中的宽度路径，height-path：为图片在列表项中的高度路径,列如：{img: {width: 100, height: 100, src: 'xxxx'}},那么width-path为img.width
loading: 设置为 true 显示加载中
finished: 设置为 true 即加载完成所有的数据
finished-text: 当所有的数据都加载完后提示的方字
@load: 为触底完当前页数据后触发请求加载
gap: 数组，第一项为列之间隔，第二项为行之间隔
padding: 数组，第一项为水平，第二项为垂直 extraHeight: 额外内容的高度，比如下面class为l-waterfall-card-name的高度

<l-waterfall 
    :list="list"
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="load" 
    :gap="[10, 10]"
    :padding="[10,10]"
    :extraHeight="40rpx"
    width-path="img.width" 
    height-path="img.height">
    <template #item="{content}">
        <view class="l-waterfall-card">
            <image class="l-waterfall-card-image" :src="content.img.src" style="width: 100%;" mode="widthFix"/>
            <view class="l-waterfall-card-name">{{content.name}}</view>
        </view>
    </template>
</l-waterfall>

const list = ref([])
const loading = ref(false)
const finished = ref(false)
const load = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    loading.value = true
    setTimeout(() => {
        const newList = new Array(10).fill(0).map((v, i) => {
            const width = range(200, 500)
            const height = range(200, 500)
            const name = range(100, 1000) + 'via' 
            return {
                img: {
                    src: `https://via.placeholder.com/${width}x${height}.png/rgb(${range(0,255)},${range(0,255)},${range(0,255)})`,
                    width,
                    height,
                },
                name
            }
        })
        list.value.push(...newList)

        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true;
        }
    },3000)
}

未知尺寸

• 1、需要配合l-image这个图片插件才能实现，下载本瀑布流插件会自动下载lime-image插件，无需再次导入。
• 2、瀑布流插件与l-image插件握手，需要给l-image传入两个Key,parent-id和inject-id,parent-id目前是固定的，即按下面demo填即可。inject-id为瀑布流插件给每项生成的id，l-image需要拿到这个id,再向父级通讯
• 3、瀑布流插件用到了 provide 和 intersectionObserver这两能力，故不是所有的平台都支持。已知nvue不支持intersectionObserver
• 4、由于须要知道图片尺寸，所以如果图片网络过慢会影响浏览体验
• 5、滚动加载距离offset, 默认为1500,当图片进入观察区（屏幕底部1500px）时加载

  <l-waterfall 
  :list="list" 
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="load" 
  :gap="[10, 10]">
  <template #item="{id, content}">
      <view class="l-waterfall-card">
          <l-image class="l-waterfall-card-image" parent-id="l-waterfall" :inject-id="id"  :src="content.img.src" l-style="width: 100%;" mode="widthFix"/>
          <view class="l-waterfall-card-name">{{content.name}}</view>
      </view>
  </template>
  </l-waterfall>

const list = ref([])
const loading = ref(false)
const finished = ref(false)
const load = () => {
    // 异步更新数据
    // setTimeout 仅做示例
    loading.value = true
    setTimeout(() => {
        const newList = new Array(10).fill(0).map((v, i) => {
            const width = range(200, 500)
            const height = range(200, 500)
            const name = range(100, 1000) + 'via' 
            return {
                img: {
                    src: `https://via.placeholder.com/${width}x${height}.png/rgb(${range(0,255)},${range(0,255)},${range(0,255)})`,
                    width,
                    height,
                },
                name
            }
        })
        list.value.push(...newList)

        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true;
        }
    },3000)
}

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-waterfall/compoents/lime-waterfall -->
<lime-waterfall />

插件标签

• 默认 l-waterfall 为 component
• 默认 lime-waterfall 为 demo

API

Props

Events

Slots