效果圖如下所示

上拉加載

下面直接說(shuō)原理

瀏覽器監(jiān)聽(tīng)滾動(dòng)條，當(dāng)滾動(dòng)條的超出部分的距離+屏幕的可視高度>文檔的高度，觸發(fā)觸底函數(shù)。

獲取代碼

 window.addEventListener('scroll', function(){
                    // topHeight就是滾動(dòng)條超出頂部的部分高度
                    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){
                    ###雖然以上代碼能觸發(fā)觸底函數(shù)，但是由于監(jiān)聽(tīng)滾動(dòng)條的滾動(dòng)過(guò)于密 
                    ###集，所以會(huì)觸發(fā)多次觸底函數(shù)，簡(jiǎn)單的通過(guò)data中設(shè)置是否標(biāo)記參數(shù) 
                    ###依然能夠進(jìn)來(lái)兩個(gè)請(qǐng)求，不能夠及時(shí)斷開(kāi)，所以需要加上如下代碼
                   if（!that.timer）{
                        that.timer = setTimeout(() => {
                                  //do something about touchBottom
                                }, 1000）
                          }
                    }
               
})

總結(jié)

Vue不像小程序那樣，js中自帶onReachBottom觸底函數(shù)，在vue中，需要自己寫觸發(fā)條件，如上是我查閱了網(wǎng)絡(luò)上的一些文章整理出來(lái)的，再此感謝前人的經(jīng)驗(yàn)分享，整理記錄，以備后面自己迷茫時(shí)候翻閱查看。

2020/7/4號(hào)，發(fā)現(xiàn)vue中有更好的插件解決上拉加載，特來(lái)補(bǔ)充（以下部分屬于轉(zhuǎn)載，轉(zhuǎn)載鏈接已經(jīng)標(biāo)注至文末）

一 安裝

使用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">未驗(yàn)收</tab-item>
        <tab-item @on-item-click="e=>tabChange(1)" v-bind:selected="selectTabIndex=='1'?true:false">已驗(yàn)收</tab-item>
      </tab>
 <scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller" >
<scroller>

在methods方法中增加refresh和infinite2個(gè)方法。

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

    /**
     * 上拉獲取
     */
    infinite(done) {
      this.pageNumber++;
      console.log("infinite");
      this.getOrderList(this.selectTabIndex, done);
    },
    /**
     * 左右滑動(dòng)設(shè)置初始值
     */
    setInitParas(){
      this.pageNumber = 1;
      this.setloadingshow();
      this.items=[]
      this.$refs.my_scroller.finishInfinite(false);
    },
 /**
     * 獲取臺(tái)賬列表參數(shù)信息
     */
    getOrderParams(index) {
      //index為1表示已驗(yàn)貨,0表示未驗(yàn)貨 2
      let dbconsignee_phone = localStorage.getItem("dbconsignee_phone");
      var searchData = {
        dbordernumber: "", //提貨單號(hào)
        dbconsignee_phone: dbconsignee_phone, //手機(jī)號(hào)碼
        acceptance_status: index,
        pageSize:5, //一頁(yè)多少數(shù)
        pageNumber: this.pageNumber, //頁(yè)碼
        order: "",
        sort: ""
      };
      return searchData;
    },

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

    /**
     * 獲取臺(tái)賬列表信息
     */
    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 做的功能中左右切換使用的是同一個(gè)scroller，當(dāng)一個(gè)數(shù)據(jù)加載完畢，切換到另外一個(gè)，不可以上拉獲取數(shù)據(jù)。
  在切換tab頁(yè)的時(shí)候調(diào)用this.$refs.my_scroller.finishInfinite(false)
finishInfinite函數(shù)為scroller實(shí)例的方法，當(dāng)參數(shù)為false時(shí)，上拉獲取數(shù)據(jù)可以重新調(diào)用。當(dāng)參數(shù)為true，上拉獲取數(shù)據(jù)回調(diào)函數(shù)停止使用,下拉下部不再顯示loading，會(huì)顯示‘’暫無(wú)更多數(shù)據(jù)

• 下拉刷新，刷新完畢，loading動(dòng)畫一直存在不消失。
  需要手動(dòng)調(diào)用finishPullToRefresh。停止下拉刷新。
  調(diào)用方式：this.$refs.my_scroller.finishPullToRefresh();

• infinite的回調(diào)函數(shù)done調(diào)用時(shí)間
  將后臺(tái)獲取的數(shù)據(jù)，復(fù)制到vue組件的數(shù)據(jù)源后，再進(jìn)行調(diào)用done函數(shù)。如果在之前調(diào)用,會(huì)循環(huán)調(diào)用。如果不調(diào)用這個(gè)函數(shù)，上拉獲取數(shù)據(jù)函數(shù)調(diào)用不成功。

并附官網(wǎng)API

API

翻譯了一部分經(jīng)常使用的

Scroller vm instance methods:

• resize() resize scroller content (已經(jīng)廢棄)
• triggerPullToRefresh() 觸發(fā)下拉刷新
• finishPullToRefresh() 完成下拉刷新.可以手動(dòng)調(diào)用
• finishInfinite(isNoMoreData :Boolean) 當(dāng)參數(shù)為false時(shí)，上拉獲取數(shù)據(jù)可以重新調(diào)用。當(dāng)參數(shù)為true，上拉獲取數(shù)據(jù)回調(diào)函數(shù)停止使用,下拉下部不再顯示loading，會(huì)顯示‘’暫無(wú)更多數(shù)據(jù)
• 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

作者：?jiǎn)沃缓鸰569d
鏈接：http://www.itdecent.cn/p/a39f5276ff0b
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。