更新记录

1.1.0(2024-07-12) 下载此版本

由一开始页面写法 更改为 组件写法。加入了插槽、props传参、点击事件。具体可根据自己的业务需求进行自定义

1.0.0(2024-07-11) 下载此版本

初始化


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

使用方法

<template>
  <view class="TravelDiscover">
    <dk-watefall :list="list" @click="wateClick"></dk-watefall>
  </view>
</template>

<script>
import DkWatefall from 'components/dk-watefall/dk-watefall.vue';
export default {
  name: 'TravelDiscover',
  components: {
    DkWatefall,
  },
  data() {
    return {
      list: [],
      colors: [
        'ffb34b',
        'f2bba9',
        'f7a196',
        'f18080',
        '88a867',
        'bfbf39',
        '89c152',
        '94d554',
        'f19ec2',
        'afaae4',
        'e1b0df',
        'c38cc1',
        '72dcdc',
        '9acdcb',
        '77b1cc',
        '448aca',
        '86cefa',
        '98d1ee',
        '73d1f1',
        '80a7dc',
      ],
    };
  },

  onLoad() {
    // 获取数据进行渲染
    this.renderData();
  },

  methods: {
    wateClick(data) {
      console.log(data);
    },
    async renderData() {
      const list = [];
      for (let i = 0; i < 15; i++) {
        // 这里模拟的是后端返回图片宽高,可以在上传图片获取并存储。
        // 如果通过uni.getImageInfo获取,性能以及展示效果会比较差
        let height = this.getRandomIntInclusive(150, 250);
        list.push({
          title: height,
          cover: `https://fakeimg.pl/300x${height}/${this.colors[this.getRandomIntInclusive(0, 19)]}/`,
          coverHeight: height,
        });
      }
      this.list = [...this.list, ...list];
    },
    // 获取俩个指定值的随机整数
    getRandomIntInclusive(min, max) {
      const minCeiled = Math.ceil(min);
      const maxFloored = Math.floor(max);
      return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
    },
  },
  // 上拉触底事件,获取数据
  onReachBottom() {
    this.renderData();
  },
};
</script>

props

参数 说明 类型 默认值 可选值
props 列表数据 Array [] -

事件

事件名 说明 回调
click 点击列表时触发 返回被点击列表的数据

插槽

名称 说明
cover 自定义图片区域
content 自定义图片下方内容

具体展示内容请根据项目需求自定义更改

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问