# List 列表

# 使用指南

适用于瀑布流、展示长列表的场景，包含滚动加载与下拉刷新两种加载交互。

# 代码演示

查看代码
<template>
  <div class="list">
    <h3-list
      ref="list1"
      v-model="loading1"
      :scroll="true"
      :upFinished="upFinished1"
      :error.sync="list1Error"
      class="demo-list"
      @pullUp="onPullUp1"
      @pullDown="onPullDown1"
    >
      <div v-for="item in list1" :key="item" class="list-item">
        {{ item }}
      </div>
    </h3-list>
  </div>
</template>
<script>
import H3List from '@/components/h3-list';
const DATA_TOTAL = 75;
export default {
  name: 'DemoList',
  components: {
    H3List,
  },
  data () {
    return {
      loading1: false,
      list1: [],
      upFinished1: false,
      listOption1: {
        limit: 20,
        page: -1,
        total: DATA_TOTAL,
      },
      list1Error: false,
      showError: false,
    };
  },
  methods: {
    genData (size, page, list) {
      return new Promise((resolve) => {
        setTimeout(() => {
          let curr = page === 0 ? 0 : list.length;
          const ex = `${Date.now()}`.substring(10);
          resolve({
            total: DATA_TOTAL,
            page: page,
            data: new Array(Math.min(size, DATA_TOTAL - curr)).fill('示例数据').map((item) => `${item}${++curr}-${ex}`),
          });
        }, 1000);
      });
    },
    async onPullUp1 () {
      const { data, total, page } = await this.genData(this.listOption1.limit, this.listOption1.page + 1, this.list1);
      this.listOption1.page = page;
      this.listOption1.total = total;
      this.list1.push(...data);
      this.loading1 = false;
      this.upFinished1 = !this.$refs.list1.checkByCount(data.length, this.listOption1.limit, page + 1, total);
      if (!this.showError) {
        this.list1Error = true;
        this.showError = true;
      }
    },
    async onPullDown1 () {
      const { data, total, page } = await this.genData(this.listOption1.limit, 0, this.list1);
      this.listOption1.page = page;
      this.listOption1.total = total;
      this.list1 = data;
      this.loading1 = false;
      this.upFinished1 = false; // 解除 上拉加载限制
    },
  },
};
</script>
<style lang="less">
.demo-list {
  position: absolute;
  bottom: 0;
  height: auto;
  top: 52px;
  width: 100%;
}
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
// .demo-list {
//   height: 300px;
// }
.list-item {
  padding: 12px 16px;
  border-bottom: 1px solid #ebedf2;
  height: 45px;
  background: #fff;
  align-items: center;
  font-size: 16px;
  display: flex;
}
</style>

# 与thinking-ui 2.0版组件的区别以及迁移

按照新的list组件规范修改相关样式

若要做迁移请参考

新增的props：error errorText

TIP

组件滚动，即prop:scroll = true，则需要给组件设置高度，可通过style或class进行设置，或者给他的父节点设置高度。

  .demo-list {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    top: 40px; // 距离顶部距离
  }

非组件滚动，需要设置prop:scroll = false，且父节点需要设置height 和 overflow-y: auto;。
若是window滚动，则html和body，不能设置overflow-x: hidden;。

# API

# Prop

属性	说明	类型	默认值
loading	组件是否处于加载状态，`v-model`绑定值	boolean	false
downEnding	组件是否处于下滑结束状态，`.sync`绑定值，需要配合`loadingText`使用，若是使用该值可以忽略对`loading`的使用	boolean	false
upEnding	组件是否处于上滑结束状态，`.sync`绑定值，需要配合`loadingText`使用，若是使用该值可以忽略对`loading`的使用	boolean	false
downEndingDuration	下滑结束状态展示时间，单位ms	number\|string	500
upEndingDuration	上滑结束状态展示时间，单位ms	number\|string	1000
downFinished	组件是否处于上滑完成状态，若无数据可加载可以设置为`true`，一般在下拉加载而非刷新时用到	boolean	false
upFinished	组件是否处于上滑完成状态，若无数据可加载可以设置为`true`	boolean	false
lockDown	是否锁定下滑	boolean	false
lockUp	是否锁定上滑	boolean	false
downOffset	下滑的触发加载距离，同时也是下滑加载状态时的展示高度	number\|string	50
upOffset	上滑的触发加载距离	number\|string	10
pullingText	拖动时候的提示文本	string	`下拉刷新`
loosingText	建议释放的提示文本	string	`松开立即刷新`
loadingText	加载状态的提示文本，若上滑下滑不相同提示，则可以设置为对象`{up:'上滑提示文本',down:'下滑提示文本'}`	string\|object	`加载中...`
endingText	结束状态的提示文本，若上滑下滑不相同提示，则可以设置为对象`{up:'上滑提示文本',down:'下滑提示文本'}`	string\|object	-
finishedText	完成状态的提示文本，若上滑下滑不相同提示，则可以设置为对象`{up:'上滑提示文本',down:'下滑提示文本'}`	string\|object	`已加载全部数据`
scroll	是否本组件滚动	boolean	true
auto	是否在初始化完毕后判断是否需要加载数据	boolean	true
error	是否加载失败, `.sync`绑定值，需要配合`errorText`使用, 加载失败后点击错误提示可以重新触发 pullUp 事件	boolean	false
errorText	加载失败后的提示文案	string	加载失败，请点击重试

# Event

事件名	说明	参数
input	加载状态时触发，将传入值`loading`设置为`true`，`v-model`绑定事件	value: boolean
update:downEnding	下滑加载状态时触发，将传入值`prop:downEnding`设置为`false`，`.sync`绑定事件	value: boolean
update:upEnding	上滑加载状态时触发，将传入值`prop:upEnding`设置为`false`，`.sync`绑定事件	value: boolean
pullDown	组件下滑	-
pullUp	组件上滑	-

# Function

实例方法

方法名	说明	参数
check	检查是否到达上滑加载边界	-
checkByCount	通过总数判断是否有下一页，返回值可作为finished状态判断依据，内部会调用checkByHasNext	currLoadedCount: 最近一次加载出来的数据数量, pageLimit: 每页限制条数, currPage: 当前页数，非页数下标，即若是使用的page是由0开始，需要加一传入, totalCount：总数
checkByPage	通过页数判断是否有下一页，返回值可作为finished状态判断依据，内部会调用checkByHasNext	currLoadedCount: 最近一次加载出来的数据数量, pageLimit: 每页限制条数, currPage: 当前页数，非页数下标，即若是使用的page是由0开始，需要加一传入, totalPage：总页数
checkByHasNext	通过hasNext判断是否有下一页，返回值可作为finished状态判断依据，该方法额外判断了最近一次加载出来的数据数量不小于每页限制条数的情况	currLoadedCount: 最近一次加载出来的数据数量, pageLimit: 每页限制条数, hasNext：是否有下一页

# Slots

插槽名	说明	SlotProps
down	下滑提示插槽	{distance: 向下滑动距离, status: 下滑提示状态，值为 `readying` `pulling` `loosing` `loading` `ending` `finished` 其中之一}
up	上滑提示插槽	{status: 上滑提示状态，值为 `readying` `loading` `ending` `finished` 其中之一}

← Calendar 日历 Tree 树形组件 →