效果图如下所示

上拉加载

下面直接说原理

浏览器监听滚动条，当滚动条的超出部分的距离+屏幕的可视高度>文档的高度，触发触底函数。

获取代码

 window.addEventListener('scroll', function(){
                    // topHeight就是滚动条超出顶部的部分高度
                    let topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
                      //documentHeight 为文档流的高度
                    let documentHeight = document.documentElement.clientHeight
                      //bodyHeight 窗口的可视高度
                    let bodyHeight=document.body.clientHeight
                    if(topHeight + bodyHeight >= documentHeight){
                    ###虽然以上代码能触发触底函数，但是由于监听滚动条的滚动过于密 
                    ###集，所以会触发多次触底函数，简单的通过data中设置是否标记参数 
                    ###依然能够进来两个请求，不能够及时断开，所以需要加上如下代码
                   if（!that.timer）{
                        that.timer = setTimeout(() => {
                                  //do something about touchBottom
                                }, 1000）
                          }
                    }
               
})

总结

Vue不像小程序那样，js中自带onReachBottom触底函数，在vue中，需要自己写触发条件，如上是我查阅了网络上的一些文章整理出来的，再此感谢前人的经验分享，整理记录，以备后面自己迷茫时候翻阅查看。

2020/7/4号，发现vue中有更好的插件解决上拉加载，特来补充（以下部分属于转载，转载链接已经标注至文末）

一 安装

使用npm 安装
npm install vue-scroller -d

二 引入

import VueScroller from "vue-scroller"
Vue.use(VueScroller);

三 使用

   <tab>
         <tab-item @on-item-click="e=>tabChange(0)" v-bind:selected="selectTabIndex=='0'?true:false">未验收</tab-item>
        <tab-item @on-item-click="e=>tabChange(1)" v-bind:selected="selectTabIndex=='1'?true:false">已验收</tab-item>
      </tab>
 <scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller" >
<scroller>

在methods方法中增加refresh和infinite2个方法。

  methods: {
    /**
     * 下拉刷新
     */
    refresh() {
      console.log("refresh");
      this.pageNumber = 1;
      this.getOrderList(this.selectTabIndex);
    },

    /**
     * 上拉获取
     */
    infinite(done) {
      this.pageNumber++;
      console.log("infinite");
      this.getOrderList(this.selectTabIndex, done);
    },
    /**
     * 左右滑动设置初始值
     */
    setInitParas(){
      this.pageNumber = 1;
      this.setloadingshow();
      this.items=[]
      this.$refs.my_scroller.finishInfinite(false);
    },
 /**
     * 获取台账列表参数信息
     */
    getOrderParams(index) {
      //index为1表示已验货,0表示未验货 2
      let dbconsignee_phone = localStorage.getItem("dbconsignee_phone");
      var searchData = {
        dbordernumber: "", //提货单号
        dbconsignee_phone: dbconsignee_phone, //手机号码
        acceptance_status: index,
        pageSize:5, //一页多少数
        pageNumber: this.pageNumber, //页码
        order: "",
        sort: ""
      };
      return searchData;
    },

    setloadingshow() {
      this.$vux.loading.show({
        text: "加载中"
      });
    },

    /**
     * 获取台账列表信息
     */
    getOrderList(index, done) {
      const that = this;
      this.selectTabIndex = index;
      const searchData = this.getOrderParams(this.selectTabIndex);
      const params = {
        url: "/receiver/bill/order/datalist",
        reqparams: {
          cmdData: JSON.stringify(searchData)
        },
        onSuccess(data) {
          that.$vux.loading.hide();
          const billJson = JSON.parse(data);
          const newOrderItem = that.formatterOrderData(billJson.rows);
          if (newOrderItem.length > 0) {
            that.items = that.items.concat(newOrderItem);
          }
          if(typeof(done)=="function"){
            done();
          }
          that.$refs.my_scroller.finishPullToRefresh();
          if ( that.pageNumber >= billJson.pageCount ||billJson.pageCount == 0 ) {
            that.$refs.my_scroller.finishInfinite(true);
          }
        }
      };
      http.getData(params);
    },
 }

四 使用的坑

• 1 做的功能中左右切换使用的是同一个scroller，当一个数据加载完毕，切换到另外一个，不可以上拉获取数据。
  在切换tab页的时候调用this.$refs.my_scroller.finishInfinite(false)
finishInfinite函数为scroller实例的方法，当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据

• 下拉刷新，刷新完毕，loading动画一直存在不消失。
  需要手动调用finishPullToRefresh。停止下拉刷新。
  调用方式：this.$refs.my_scroller.finishPullToRefresh();

• infinite的回调函数done调用时间
  将后台获取的数据，复制到vue组件的数据源后，再进行调用done函数。如果在之前调用,会循环调用。如果不调用这个函数，上拉获取数据函数调用不成功。

并附官网API

API

翻译了一部分经常使用的

Scroller vm instance methods:

• resize() resize scroller content (已经废弃)
• triggerPullToRefresh() 触发下拉刷新
• finishPullToRefresh() 完成下拉刷新.可以手动调用
• finishInfinite(isNoMoreData :Boolean) 当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据
• scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
• scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
• getPosition :Object get current position of scroller content

作者：单只蝴蝶_569d
链接：https://www.jianshu.com/p/a39f5276ff0b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。