更新记录

1.1.0（2024-07-12） 下载此版本

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

1.0.0（2024-07-11） 下载此版本

初始化

平台兼容性

uni-app

uni-app x

使用方法

<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

事件

插槽

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