vue 實(shí)現(xiàn)滾動到底部翻頁效果(pc端)

更新時間：2019年07月31日 11:26:34 作者：小角色Byme

這篇文章主要介紹了pc端vue 滾動到底部翻頁效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下

pc端vue 滾動到底部翻頁效果，具體內(nèi)容如下所示：

html：

<div class="list" ref="scrollTopList">
                <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)">
                  <span class="state" :class="{'state1':item.status==1,'state0':item.status==0,'state2':item.status==2,'state3':item.status==3}"></span>
                  <span class="text textcolor">【{{item.code||item.name}}】</span>
                  <span class="text">{{item.name}}</span>
                </div>
              </div>

js:

先寫滾動事件

handleScroll(){
        let scrollTop = this.$refs.scrollTopList.scrollTop, 
        clientHeight = this.$refs.scrollTopList.clientHeight, 
        scrollHeight = this.$refs.scrollTopList.scrollHeight,
        height = 50; //根據(jù)項(xiàng)目實(shí)際定義
        if(scrollTop +clientHeight >= scrollHeight - height){
          if(this.pageSize > this.total){
            return false
          }else{
            this.pageSize = this.pageSize +10 //顯示條數(shù)新增
            this.getpageList() //請求列表list 接口方法
          } 
        }else{
          return false
        }
      },

method中寫節(jié)流函數(shù)

throttle(func, wait) {
        let lastTime = null
        let timeout
        return () => {
          let context = this;
          let now = new Date();
          let arg = arguments;
          if (now - lastTime - wait > 0) {
            if (timeout) {
              clearTimeout(timeout)
              timeout = null
            }
            func.apply(context, arg)
            lastTime = now
          } else if (!timeout) {
            timeout = setTimeout(() => {
              func.apply(context, arg)
            }, wait)
          }
        }
      },

mounted中調(diào)用

mounted(){
this.$refs.scrollTopList.addEventListener("scroll",this.throttle(this.handleScroll,500),true)
},

//-------------------------------------------------------------------------------------------第二種寫法

html:

添加滾動事件

<div class="tablelist-box" @scroll="scrollEvent($event)">
        <div
         class="tablelist"
         :class="{'active':listDevicesDetailIndex==index}"
         v-for="(item,index) of deviceList"
         :key="index"
         v-if="deviceList.length !== 0"
         @click="deviceDetail(item,index)"
        >
         <span class="tablelist-status">
          <i
           :class="{zx:item.status==1,lx:item.status==2, wjh:item.status==0,gj:item.status==3}"
          ></i>
         </span>
         <span class="tablelist-bg">{{item.code != null ?item.code:"/"}}</span>
        </div>
        <div class="list-more" v-show="!deviceListIsFinish">{{deviceTip}}</div>
        <div class="list-more" v-show="deviceListIsFinish">{{deviceTip}}</div>
       </div>

css:

tablelist-box{
 height: //根據(jù)實(shí)際項(xiàng)目取
 overflow:auto //必須 不然判斷有問題
}

css 定義

寫入滾動事件

scrollEvent(e) {
   if (e instanceof Event) {
    let el = e.target;
    let scrollTop = el.scrollTop;
    // 獲取可視區(qū)的高度
    let clientHeight = el.clientHeight;
    // 獲取滾動條的總高度
    let scrollHeight = el.scrollHeight;
    let height = 50;
    //到底了
    // console.log(this.deviceListIsLoad, this.deviceListIsFinish);
    // console.log(scrollTop, clientHeight, scrollHeight);
    //是否繼續(xù)加載且已完成加載
    if (
     scrollTop + clientHeight >= scrollHeight &&
     this.deviceListIsLoad &&
     !this.deviceListIsFinish
    ) {
     // 把距離頂部的距離加上可視區(qū)域的高度 等于或者大于滾動條的總高度就是到達(dá)底部
     this.deviceListIsLoad = true;
     console.log("到底了");
     setTimeout(() => {
      this._deviceListPage();
     }, 1000);
    }
   }

請求列表的處理

 _deviceListPage() {
   let params = {
    pageSize: this.devicePageSize,
    pageNum: this.devicePageNum,
    kw: "", //查詢條件（通配查詢條件）
    type: this.deviceType, //設(shè)備類型（下拉）2.1.6接口獲取
    code: this.deviceCode, //設(shè)備編號
    areaId: this.deviceareaId, //位置區(qū)域
    status: this.deviceStatus, //狀態(tài) 1：在線（正常），0：未激活，2已離線，3.告警
    imei: "" //imei編號
   };
   deviceListPage(params).then(res => {
    if (res.code == 200) {
     this.devicePageTotal = res.body.total;
     this.devicePageSize = res.body.pageSize;
     this.devicePageNum = res.body.pageNum;
     this.devicePageTotalPages = parseInt(
      (this.devicePageTotal + this.devicePageSize - 1) /
       this.devicePageSize
     );
     if (this.devicePageTotal == 0) {
      // console.log("沒有數(shù)據(jù)");
      //沒有數(shù)據(jù)
      this.deviceListnodata = true;
      this.deviceListIsLoad = false;
      this.deviceListIsFinish = true;
      this.devicePageNum = 1;
      this.deviceTip = "暫無數(shù)據(jù)";
      return false;
     }
     this.deviceList = this.deviceList.concat(res.body.datas);
     // console.log(this.devicePageNum, this.devicePageTotalPages);
     if (this.devicePageNum == this.devicePageTotalPages) {
      //沒有更多
      this.deviceListIsLoad = false;
      this.deviceListIsFinish = true;
      this.devicePageNum = 1;
      this.deviceTip = "沒有更多了~";
      // console.log("沒有更多了");
     } else {
      // console.log("下一頁");
      //下一頁
      this.deviceListIsLoad = true;
      this.deviceListIsFinish = false;
      this.devicePageNum++;
      this.deviceTip = "正在加載中~";
     }
     // console.log("deviceList", this.deviceList);
    } else {
     // this.deviceList = [];
     this.deviceListIsLoad = false;
     this.deviceListIsFinish = true;
     this.devicePageNum = 1;
     this.deviceTip = "數(shù)據(jù)加載失敗~";
    }
   });
  },

return中的定義

devicePageSize: 10, //每頁顯示
   devicePageNum: 1, //當(dāng)前頁
   devicePageTotal: 0, //總條數(shù)
   devicePageTotalPages: 0, //總頁數(shù)
   deviceListIsFinish: false, //是否加載完成
   deviceListIsLoad: false, //是否加載更多
   deviceListnodata: false, //是否有數(shù)據(jù)
   deviceTip: "",

總結(jié)

以上所述是小編給大家介紹的vue 實(shí)現(xiàn)滾動到底部翻頁效果(pc端),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: