List 列表

使用指南

可下拉刷新，上拉加载的组件

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      基本用法
    </p>
    <h3-list
      ref="list1"
      :scroll="true"
      v-model="loading1"
      :upFinished="upFinished1"
      @pullUp="onPullUp1"
      @pullDown="onPullDown1"
      class="demo-list"
    >
      <div v-for="item in list1" :key="item" class="list-item">
        {{ item }}
      </div>
    </h3-list>
    <p class="sub-title">
      ending状态
    </p>
    <h3-list
      ref="list2"
      :scroll="true"
      v-model="loading2"
      :downEnding.sync="downEnding2"
      :upEnding.sync="upEnding2"
      :upFinished="upFinished2"
      @pullUp="onPullUp2"
      @pullDown="onPullDown2"
      class="demo-list"
      endingText="加载数据成功"
    >
      <div v-for="item in list2" :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,
      },
      loading2: false,
      list2: [],
      downEnding2: false,
      upEnding2: false,
      upFinished2: false,
      listOption2: {
        limit: 20,
        page: -1,
        total: DATA_TOTAL,
      },
    };
  },
  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);
    },
    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; // 解除 上拉加载限制
    },
    async onPullUp2 () {
      const { data, total, page } = await this.genData(this.listOption2.limit, this.listOption2.page + 1, this.list1);
      this.listOption2.page = page;
      this.listOption2.total = total;
      this.list2.push(...data);
      this.upEnding2 = true;
      this.upFinished2 = !this.$refs.list2.checkByCount(data.length, this.listOption2.limit, page + 1, total);
    },
    async onPullDown2 () {
      const { data, total, page } = await this.genData(this.listOption2.limit, 0, this.list1);
      this.listOption2.page = page;
      this.listOption2.total = total;
      this.list2 = data;
      this.downEnding2 = true;
      this.upFinished2 = 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>

与h3-mobile-vue组件的区别以及迁移

旧组件库的h3-list组件仅仅是一个列表式的包裹组件，实际用处不大，同时h3-scroll组件功能依赖了mescroll.js，为了更好的代码维护及功能升级，于是废弃旧组件h3-scroll和h3-list。将h3-scroll组件的功能通过内部实现，移除了对mescroll.js依赖，重构成新的h3-list。

这是一个新组件。

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

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 其中之一}