# 瀑布流

**Repository Path**: mahoushaojo/waterfall-flow

## Basic Information

- **Project Name**: 瀑布流
- **Description**: 瀑布流樣式組件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-06
- **Last Updated**: 2021-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 瀑布流组件

[TOC]

#### 1. 使用

```javascript
import waterfall from "@/components/waterfall";
```

```javascript
export default {
  components: {
    vueWaterfallEasy
  }
}
```

**注意**：组件使用了vant 的<van-list/>组件与<van-pull-refresh/>组件，分别用来实现上拉加载与下拉刷新，使用前需要安装vant。 

[https://youzan.github.io/vant/#/zh-CN/home]: vant官网



#### 2. 基本实例

```vue
<waterfall :dataList="dataList">
  <template v-slot:waterfall-info="props">
    <p class="title">{{ props.value.name }}</p>
  </template>
</waterfall>
```

#### 3. 实现原理

data-list 参数传递数据进入组件，使用computed 计算属性把数组通过奇偶拆分成两个数组：left-list、right-list。页面的整体布局使用flex布局分为两列，然后两列下数据进行排列。通过把数据进行奇偶分化，传递给两列，例如left-list[0] right-list[0] 分别对应data-list 中的 0 和 1，依次顺序进行排列。

#### 4. 其他功能

当data-list的长度为空时，默认显示没有数据的占位符。

#### 5. 组件参数

**如果需要针对vant的一些组件自定义 请在组件内部自行操作（例如自定义下拉与上拉加载的动画样式）**

| 参数          | 类型    | 默认值           | 描述                                                 |
| ------------- | ------- | ---------------- | ---------------------------------------------------- |
| data-list     | Array   | []               | 列表数据**（必填）**                                 |
| finished-text | String  | 没有更多了...    | 当加载到底部没有数据时显示的文本**（非必填）**       |
| is-lazy       | Boolean | true             | 是否进行图片懒加载**(非必填)**                       |
| img-key       | String  | 'imgurl'         | 当你的图片地址键值不为imgurl，可以使用该属性进行转换 |
| loading-text  | String  | '加载中...'      | 上拉加载时的提示文本**(非必填)**                     |
| offset        | Number  | 300              | 滚动条与底部距离小于 offset 时触发`上拉加载`事件     |
| pulling-text  | String  | '下拉刷新...'    | 下拉过程提示文案**(非必填)**                         |
| loosing-text  | String  | '松开进行刷新..' | 下拉释放过程提示文案**(非必填)**                     |
| down-text     | String  | '加载中...'      | 下拉刷新时的提示文本**(非必填)**                     |
| success-text  | String  | -                | 下拉刷新成功提示文案**(非必填)**                     |
| pull-distance | Number  | 50               | 触发下拉刷新的距离**(非必填)**                       |
| down-disabled | Boolean | false            | 是否禁用下拉刷新                                     |

#### 6. 事件

| 事件名    | 描述                                                      |
| --------- | --------------------------------------------------------- |
| onRefresh | 下拉刷新传递时传递的事件                                  |
| onLoad    | 上拉加载时传递的事件                                      |
| cardClick | 列表数据被点击时传递的事件**返回（value,index）两个参数** |

#### 7. 主动调用组件内部事件

问：为什么要主动调用内部事件？

答：用来在上拉或下拉刷新数据时，内容不存在更多数据时，向组件内部通知，用来显示"没有更多了.."文本

或者在使用 Tab类标签进行切换时，通知组件重置被禁用的上拉事件。

| 事件名    | 描述                                                         |
| --------- | ------------------------------------------------------------ |
| notMore   | 当上拉或下拉没有更多数据时，调用该函数通知组件禁用上拉事件，用来显示“没有更多了...” |
| resetMore | 当使用Tab切换标签时，上拉事件被禁用，这时需要调用该函数把事件重置。 |
| goTop| 返回顶部，用于切换tab页时让元素的scrollTop返回到顶部 |

**使用方式如下**

```vue
<template>
  <div>
	<waterfall ref="waterfall" :dataList="dataList" />
  </div>
</template>
<script>
import waterfall from "@/components/waterfall";
export default {
  components: {
    waterfall
  },
  data() {
    return {
      dataList: []
    };
  },
  methods:{
      //禁用上拉加载 显示没有更多了
      notMore(){
          this.$refs['waterfall'].notMore()
      },
      //重置组件上拉加载事件，用于tab切换
      resetMore(){
          this.$refs['waterfall'].resetMore()
      }
  }
};
</script>

```

#### 8. slot插槽

#####  8.1 slot="waterfall-top"

容器头部内容插槽

```vue
<waterfall :dataList="dataList">
   <template v-slot:waterfall-top>
     <p class="title">这是头部内容</p>
   </template>
 </waterfall>
```

#####  8.2 slot="waterfall-info"

进行自定义图片的内容插槽

```vue
<waterfall :dataList="dataList">
   <template v-slot:waterfall-info="props">
     <p class="title">{{ props.value.name }}</p>
   </template>
 </waterfall>
```