v-pull-refresh

基于 vue 封装的轻量级上下拉刷新组件

在线demo

点击查看,请使用浏览器手机模拟器模式

如何使用

 npm install v-pull-refresh

 //main.js
 import pullRefresh from 'v-pull-refresh'
 Vue.use(pullRefresh)

代码示例

<template>
  <div style='height:400px;border:1px solid black;'>
    <pull-refresh
                  :list.sync="list"
                  ref="scroll"
                  @refresh="onRefresh"
                  @loadmore="loadmore"
    >
      <div class="list">
            <ul>
              <li v-for="(n, i) in list"
                  >{{ n }}
              </li>
            </ul>
      </div>
    </pull-refresh>
  <div>
</template>

<script>
 export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    onRefresh() {
      let arr = [],
        len = this.list.length;
      for (let i = len; i < len + 10; i++) {
        arr.push(i);
      }
      setTimeout(() => {
        this.list = this.list.concat(arr);
      }, 1000);
    },
    loadmore(pageindex) {
      console.log("加载pageindex", pageindex);
      if (i >= 3) {
        //数据上拉加载完成后，显示调用此方法后，滚动到底部将不会再派发
        this.$refs.scroll && this.$refs.scroll.forceUpdate();
        return;
      }
      let arr = [],
        len = this.list.length;
      for (let i = len; i < len + 10; i++) {
        arr.push(i);
      }
      setTimeout(() => {
        this.list = this.list.concat(arr);
      }, 1000);
    }
  }


</script>

<style lang='scss' scoped>
.list {
  width: 100%;
  background-color: white;
  overflow: hidden;
  li {
    display: flex;
    align-items: center;
    margin: 10px 0;
    justify-content: center;
  }
}
</style>

使用pull-refresh组件的外层父容器，必须要指定高度，使其内部子元素继承，子元素高度超出才能进行上拉滚动加载

在使用上拉刷新时，只要改变了 list 的长度，组件内会 watch 监听 list 变化，将刷新状态重置,在上拉刷新后若无数据需要显式调用组件的forceUpdate方法通知组件内部

prop

属性	说明	类型	默认值	描述
list	数组列表	array	[]	异步的数据列表，内部
pullTip	下拉时的提示文字	string	下拉即可刷新
pullingUp	是否开启上拉刷新	Boolean	true
pullingDown	是否开启下拉刷新	Boolean	true
refreshTip	刷新中的提示文字	string	正在刷新
usecache	是否开启缓存	Boolean	false	开启缓存后，会将list数据以及刷新状态，滚动条高度等进行缓存(待实现)

emit-event

事件方法	说明	参数
refresh	下拉刷新成功后，触发此事件	无
loadmore	上拉刷新成功后，触发此事件	pageIndex (nubmer)

实例事件

事件方法	说明
forceUpdate	上拉刷新成功后，如list数组没有数据，应调用此方法，组件将不再派发滚动到底部事件

其他

具体用例可查看 example 文件夹内使用方法