Waterfall 瀑布流

这是一个瀑布流形式的组件，内容分为左右两列，结合uView的懒加载组件效果更佳。
相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uView的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，或者因为演示区域太小，或者电脑分别率不够高 ，导致演示可能会有问题，手机端有不会这些问题，请在右上角的”演示”中用手机扫码查看对应的效果。

注意

在微信小程序中，结合懒加载组件无效，见下方说明

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

基本使用

本组件利用了vue的作用域插槽(详见vue文档Waterfall 瀑布流 - 图1)特性， 将传入waterfall内部的数据，通过slot(作用域插槽)让用户能在父组件中引用和配置对应的数据，这样做的 原因是可以让用户自定义列表item的结构和样式，达到真正的组件化。

需要注意的是，组件内部导出的数据，需要使用template元素接收，同时通过v-slot指定左右两列的slot，如 v-slot:left="list"，这里的list变量名为用户自定义的(意味着您可以起名叫data都是没问题的)，它为一个对象，它内部分别有leftList和rightList，用于 渲染左右两列的数据，见如下完整示例：

核心代码

  1. <u-waterfall :flow-list="flowList">
  2.     <template v-slot:left="{leftList}">
  3.         <view v-for="(item, index) in leftList" :key="index">
  4.             <!-- 这里编写您的内容，item为您传递给flow-list数的组元素 -->
  5.         </view>
  6.     </template>
  7.     <template v-slot:right="{rightList}">
  8.         <view v-for="(item, index) in rightList" :key="index">
  9.             <!-- 这里编写您的内容，item为您传递给flow-list数组的元素 -->
  10.         </view>
  11.     </template>
  12. </u-waterfall>

移除或清空数据

移除或者清空，都需要通过ref调用组件内部的方法。

  1. 移除数据

组件内部方法名为remove，需要传入”id”值，这个”id”键值的名称配置参数为idKey(默认id)，如下：

假设您的数据为:

  1. let arr = [
  2.     {idx: 1, name: 'lisa'},
  3.     {idx: 2, name: 'mary'}
  4. ]

那么您应该配置idKey为idx。

  1. 清空数据

通过ref手动调用组件内部的clear方法，可以清空左右两列的数据。

说明：具体实现方法，请见下方的示例代码

完整应用示例

  1. <template>
  2.     <view class="wrap">
  3.         <u-button @click="clear">清空列表</u-button>
  4.         <u-waterfall :flowList="flowList" ref="uWaterfall">
  5.             <template v-slot:left="{leftList}">
  6.                 <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
  7.                     <!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
  8.                     <!-- #ifndef MP-WEIXIN -->
  9.                     <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
  10.                     <!-- #endif -->
  11.                     <!-- #ifdef MP-WEIXIN -->
  12.                     <view class="demo-img-wrap">
  13.                         <image class="demo-image" :src="item.image" mode="widthFix"></image>
  14.                     </view>
  15.                     <!-- #endif -->
  16.                     <view class="demo-title">
  17.                         {{item.title}}
  18.                     </view>
  19.                     <view class="demo-price">
  20.                         {{item.price}}元
  21.                     </view>
  22.                     <view class="demo-tag">
  23.                         <view class="demo-tag-owner">
  24.                             自营
  25.                         </view>
  26.                         <view class="demo-tag-text">
  27.                             放心购
  28.                         </view>
  29.                     </view>
  30.                     <view class="demo-shop">
  31.                         {{item.shop}}
  32.                     </view>
  33.                     <!-- 微信小程序无效，因为它不支持在template中引入组件 -->
  34.                     <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
  35.                 </view>
  36.             </template>
  37.             <template v-slot:right="{rightList}">
  38.                 <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
  39.                     <!-- #ifndef MP-WEIXIN -->
  40.                     <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
  41.                     <!-- #endif -->
  42.                     <!-- #ifdef MP-WEIXIN -->
  43.                     <view class="demo-img-wrap">
  44.                         <image class="demo-image" :src="item.image" mode="widthFix"></image>
  45.                     </view>
  46.                     <!-- #endif -->
  47.                     <view class="demo-title">
  48.                         {{item.title}}
  49.                     </view>
  50.                     <view class="demo-price">
  51.                         {{item.price}}元
  52.                     </view>
  53.                     <view class="demo-tag">
  54.                         <view class="demo-tag-owner">
  55.                             自营
  56.                         </view>
  57.                         <view class="demo-tag-text">
  58.                             放心购
  59.                         </view>
  60.                     </view>
  61.                     <view class="demo-shop">
  62.                         {{item.shop}}
  63.                     </view>
  64.                     <!-- 微信小程序无效，因为它不支持在template中引入组件 -->
  65.                     <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
  66.                 </view>
  67.             </template>
  68.         </u-waterfall>
  69.         <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
  70.     </view>
  71. </template>
  73. <script>
  74.     export default {
  75.         data() {
  76.             return {
  77.                 loadStatus: 'loadmore',
  78.                 flowList: [],
  79.                 list: [
  80.                     {
  81.                         price: 35,
  82.                         title: '北国风光，千里冰封，万里雪飘',
  83.                         shop: '李白杜甫白居易旗舰店',
  84.                         image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
  85.                     },
  86.                     {
  87.                         price: 75,
  88.                         title: '望长城内外，惟余莽莽',
  89.                         shop: '李白杜甫白居易旗舰店',
  90.                         image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
  91.                     },
  92.                     {
  93.                         price: 385,
  94.                         title: '大河上下，顿失滔滔',
  95.                         shop: '李白杜甫白居易旗舰店',
  96.                         image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
  97.                     },
  98.                     {
  99.                         price: 784,
  100.                         title: '欲与天公试比高',
  101.                         shop: '李白杜甫白居易旗舰店',
  102.                         image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
  103.                     },
  104.                     {
  105.                         price: 7891,
  106.                         title: '须晴日，看红装素裹，分外妖娆',
  107.                         shop: '李白杜甫白居易旗舰店',
  108.                         image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
  109.                     },
  110.                     {
  111.                         price: 2341,
  112.                         shop: '李白杜甫白居易旗舰店',
  113.                         title: '江山如此多娇，引无数英雄竞折腰',
  114.                         image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
  115.                     },
  116.                     {
  117.                         price: 661,
  118.                         shop: '李白杜甫白居易旗舰店',
  119.                         title: '惜秦皇汉武，略输文采',
  120.                         image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
  121.                     },
  122.                     {
  123.                         price: 1654,
  124.                         title: '唐宗宋祖，稍逊风骚',
  125.                         shop: '李白杜甫白居易旗舰店',
  126.                         image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  127.                     },
  128.                     {
  129.                         price: 1678,
  130.                         title: '一代天骄，成吉思汗',
  131.                         shop: '李白杜甫白居易旗舰店',
  132.                         image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  133.                     },
  134.                     {
  135.                         price: 924,
  136.                         title: '只识弯弓射大雕',
  137.                         shop: '李白杜甫白居易旗舰店',
  138.                         image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  139.                     },
  140.                     {
  141.                         price: 8243,
  142.                         title: '俱往矣，数风流人物，还看今朝',
  143.                         shop: '李白杜甫白居易旗舰店',
  144.                         image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  145.                     },
  146.                 ]
  147.             }
  148.         },
  149.         onLoad() {
  150.             this.addRandomData();
  151.         },
  152.         onReachBottom() {
  153.             this.loadStatus = 'loading';
  154.             // 模拟数据加载
  155.             setTimeout(() => {
  156.                 this.addRandomData();
  157.                 this.loadStatus = 'loadmore';
  158.             }, 1000)
  159.         },
  160.         methods: {
  161.             addRandomData() {
  162.                 for(let i = 0; i < 10; i++) {
  163.                     let index = this.$u.random(0, this.list.length - 1);
  164.                     // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
  165.                     let item = JSON.parse(JSON.stringify(this.list[index]))
  166.                     item.id = this.$u.guid();
  167.                     this.flowList.push(item);
  168.                 }
  169.             },
  170.             remove(id) {
  171.                 this.$refs.uWaterfall.remove(id);
  172.             },
  173.             clear() {
  174.                 this.$refs.uWaterfall.clear();
  175.             }
  176.         }
  177.     }
  178. </script>
  180. <style>
  181.     /* page不能写带scope的style标签中，否则无效 */
  182.     page {
  183.         background-color: rgb(240, 240, 240);
  184.     }
  185. </style>
  187. <style lang="scss" scoped>
  188.     .demo-warter {
  189.         border-radius: 8px;
  190.         margin: 5px;
  191.         background-color: #ffffff;
  192.         padding: 8px;
  193.         position: relative;
  194.     }
  196.     .u-close {
  197.         position: absolute;
  198.         top: 32rpx;
  199.         right: 32rpx;
  200.     }
  202.     .demo-image {
  203.         width: 100%;
  204.         border-radius: 4px;
  205.     }
  207.     .demo-title {
  208.         font-size: 30rpx;
  209.         margin-top: 5px;
  210.         color: $u-main-color;
  211.     }
  213.     .demo-tag {
  214.         display: flex;
  215.         margin-top: 5px;
  216.     }
  218.     .demo-tag-owner {
  219.         background-color: $u-type-error;
  220.         color: #FFFFFF;
  221.         display: flex;
  222.         align-items: center;
  223.         padding: 4rpx 14rpx;
  224.         border-radius: 50rpx;
  225.         font-size: 20rpx;
  226.         line-height: 1;
  227.     }
  229.     .demo-tag-text {
  230.         border: 1px solid $u-type-primary;
  231.         color: $u-type-primary;
  232.         margin-left: 10px;
  233.         border-radius: 50rpx;
  234.         line-height: 1;
  235.         padding: 4rpx 14rpx;
  236.         display: flex;
  237.         align-items: center;
  238.         border-radius: 50rpx;
  239.         font-size: 20rpx;
  240.     }
  242.     .demo-price {
  243.         font-size: 30rpx;
  244.         color: $u-type-error;
  245.         margin-top: 5px;
  246.     }
  248.     .demo-shop {
  249.         font-size: 22rpx;
  250.         color: $u-tips-color;
  251.         margin-top: 5px;
  252.     }
  253. </style>

注意事项

  1. 上方的示例中，结合了uView的lazyload懒加载和loadmore加载更多组件，具体用法，请见文档。
  2. 用需要通过flow-list参数，将数据传递给组件，组件内部将每次新增的数据，通过动态查询左右列的高度 添加到高度低的一列。
  3. 组件有一个add-time参数，用于将单条数据添加到队列的时间间隔，因为图片加载是需要时间的，所以瀑布流左右列 的高度会不定时改变，add-time值越大，对程序效果越好，但是对用户来说，越大值可能就是以能感受的速度一个一个添加 到队列尾部的，所以这是一个双面性的结果。
  4. 由于图片加载完成的时机是不确定的，导致图片加载完成时，队列的高度会发生改变，而且这个时机是无法确定的， 所以每次添加数据的时候，单次请求的所有数据中最后一个数据不一定能准确添加高度更低的队列一侧，但是可以保证下一次请求数据的第一条 能准确添加到队列高度低的一侧。

API

IndexBar Props

参数说明类型默认值可选值
flow-list用于渲染的数据Array[ ]-
add-time单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明String | Number200-
idKey数据的唯一值的键名，见上方说明Stringid-

Methods

这些为组件内部的方法，需要通过ref调用

参数说明
clear清空列表数据
remove(id)id为唯一的”id”值，见上方说明