更新记录

1.0.4（2024-12-26） 下载此版本

组件优化

1.0.3（2024-12-25） 下载此版本

优化组件

1.0.2（2024-12-25） 下载此版本

补充示例图片

平台兼容性

hbxw-waterfall 瀑布流组件

介绍

高度可配置，内容可定义瀑布流组件

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。 示例中有使用到我的另一插件：hbxw-fixed，测试时下载使用吧

<template>
    <view class="text-hbxw-waterfall">
        <hbxw-waterfall :list="list" :columns="2" v-if="waterfall === 1">
    </hbxw-waterfall>
    <hbxw-waterfall 
      :list="list" 
      :columns="3" 
      v-if="waterfall === 2"
      :customItemStyle="{backgroundColor: 'green',borderRadius: '30rpx'}"
    >
    </hbxw-waterfall>
    <hbxw-waterfall 
      :list="list" 
      :columns="2"
      v-if="waterfall === 3"
    >
    <template #main="{item, next}">
      <view class="custom-waterfall-item">
        <view class="images-item">
          <image class="images-itemIn" @load="next" @error="next" mode="center" :src="item.src"></image>
        </view>
        <view>{{item.title}}</view>
        <view>{{item.subTitle}}</view>
        <view>{{item.price}}</view>
      </view>
    </template>
    </hbxw-waterfall>
    <hbxw-fixed :bottom="0" :left="0">
      <view class="waterfall-fixed">
        <button class="waterfall-fixed-item" @click="toggleWaterFall(1)">瀑布流1</button>
        <button class="waterfall-fixed-item" @click="toggleWaterFall(2)">瀑布流2</button>
        <button class="waterfall-fixed-item" @click="toggleWaterFall(3)">瀑布流3</button>
      </view>
    </hbxw-fixed>
    </view>
</template>

<script>
    export default {
        data() {
            return {
        waterfall: 1,
                list: []
            }
        },
    mounted() {
      this.init();
    },
    onReachBottom() {
      console.log('---- onReachBottom ----:');
      uni.showLoading({
        title: "数据加载中..."
      })
      setTimeout(() => {
        this.list.push(...[
          {
            src: 'https://placehold.jp/999999/ff4400/500x300.png?text=EXAMPLE4',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '106'
          },{
            src: 'https://placehold.jp/999999/ff4400/300x500.png?text=EXAMPLE4',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '556'
          },{
            src: 'https://placehold.jp/999999/ff4400/200x300.png?text=EXAMPLE4',
            title: '从前从前有个人爱你很久',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '56'
          },{
            src: 'https://placehold.jp/999999/ff4400/400x300.png?text=EXAMPLE4',
            title: '但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '16'
          },{
            src: 'https://placehold.jp/999999/ff4400/200x300.png?text=EXAMPLE4',
            title: '但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '196'
          }
        ])
        uni.hideLoading();
      }, 1500);
    },
        methods: {
      init() {
        this.list = [
          {
            src: 'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE0',
            title: '但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '256'
          },{
            src: 'https://placehold.jp/999999/ff4400/300x150.png?text=EXAMPLE1',
            title: '从前从前有个人爱你很久，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '96'
          },{
            src: 'https://placehold.jp/999999/ff4400/300x600.png?text=EXAMPLE2',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '656'
          },{
            src: 'https://placehold.jp/999999/ff4400/300x100.png?text=EXAMPLE3',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '856'
          },{
            src: 'https://placehold.jp/999999/ff4400/400x300.png?text=EXAMPLE4',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '506'
          },{
            src: 'https://placehold.jp/999999/ff4400/500x300.png?text=EXAMPLE4',
            title: '偏偏风渐渐把距离吹得好远',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '956'
          },{
            src: 'https://placehold.jp/999999/ff4400/200x300.png?text=EXAMPLE4',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '156'
          },{
            src: 'https://placehold.jp/999999/ff4400/600x400.png?text=EXAMPLE4',
            title: '故事的最后你好像还是说了拜拜',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '506'
          },{
            src: 'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE4',
            title: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远',
            subTitle: '从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜',
            price: '15'
          }
        ]
      },
            toggleWaterFall(type) {
        this.waterfall = type;
        this.init();
      }
        }
    }
</script>

<style lang="scss">
.text-hbxw-waterfall{
  width: 100%;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
  background-color: #F1F5F7;
}
.waterfall-fixed{
  width: 750rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: green;
  height: 100rpx;
  gap:10rpx 0;
}
.waterfall-fixed-item{
  flex:1;
  display: flex;
}
.custom-waterfall-item{
  display: flex;
  flex-direction: column;
  gap:10rpx;
}
.images-item{
  width: 100%;
  height: 240rpx;
  .images-itemIn{
    width: 100%;
    height: 100%;
  }
}
</style>

API

Props

插槽使用

• 插件提供content插槽，可以自定义瀑布项图片下面的内容，具体看示例瀑布流2

• 插件提供main插槽可以完全自定义瀑布流项，但是使用了main完全自定义，需要你手动调用插槽暴露的next方法，或者你配置nextType使用延时加载下一项，具体看示例瀑布流3

注：插件体积大因有示例图片，实际体积很小