vue-pull-to 加载请求分页 插件

1、安装
npm install vue-pull-to --save
2、文档
传送门
3、用法

• 引入

<script>
  import PullTo from 'vue-pull-to'
  
  export default {
    name: 'example',
    components: {
      PullTo
    },
    data() {
      return {
        dataList: []
      }
    },
    methods: {
      getMoreList() {
        console.log('滚动到底部加载...')
      }
    }
  }
</script>

• 使用

<div id="pullContain">
  <pull-to @infinite-scroll="getMoreList" class="file-lists">
    <ul>
      <li v-for="(fileItem,index) in list" :key="index" >
      </li>
      <span class="show-msg" v-show="list.length==0">
        这里什么都没有了哦
      </span>
    </ul>
  </pull-to>
</div>

4、坑
bottom-block-height 底部在滚动容器外的块级元素区域高度
top-block-height 顶部在滚动容器外的块级元素区域高度

• 栗子

<pull-to @infinite-scroll="getMoreList" :style="{marginTop:`${topBlockHeight}px`,marginBottom:`${bottomBlockHeight}px`}">
</pull-to>

• 切换tab
  当切换tab时；滚动条不变；这样很刺激。

//每当切换时；把页码重新定义为1；在把 list清空
methods: {
    this_navbar: async function(index) { //nav切换
       this.itemContent = [];
      // 切换tab初始化
      this.$refs.x.Initialization();
      // 获取
      this.type_id = $('.placeholder').eq(index).data("id");//tabID
      $('.placeholder').removeClass('active').eq(index).addClass('active');//选中样式
      let params = {
        complaintypeid: this.type_id,
        page: 1
      };
      let res = await Http.post(URI.supervise, Api.serviceSupervision.type_list, params),
        data = res.data;
      this.itemContent = data.data;
      this.is10 = data.data.length < 10 ? false : true;//是否超过10条数据
    },
}

Initialization() {
  this.page = 1;
}

具体参数见文档