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ù)項目實際定義        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>