快捷導(dǎo)航

Vue混入mixins滾動觸底的方法

更新時間：2019年11月22日 14:47:08 作者：三只萌新

這篇文章主要介紹了Vue混入mixins滾動觸底的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在app端常?？吹筋愃萍虞d數(shù)據(jù)的動畫，接下來我們來實(shí)現(xiàn)滾動觸底加載動畫提示，以及如何復(fù)用這些邏輯。

如何判斷滾動觸底

來看下幾張圖：

情況一：

當(dāng)文檔高度還為超過可視區(qū)域高度時，不存在滾動，所以也沒有滾動觸底

情況二：

當(dāng)文檔高度超過可視區(qū)域的高度時，還有剩余的文檔沒有滾動完，也就是說 可視區(qū)域高度 + 滾動高度 < 文檔高度 ，此時沒有達(dá)到滾動觸底的條件

情況三：

文檔高度大于可視區(qū)域，并且滾動到文檔底部, 也就是說 可視區(qū)域高度 + 滾動高度 = 文檔高度

判斷是否滾動到底

經(jīng)過上面三種情況的分析，我們需要拿到 可視區(qū)域的高度 , 滾動高度 , 文檔高度 這三個變量來進(jìn)行比較。

可視區(qū)域的高度

function getWindowHeight() {
 return document.documentElement.clientHeight;
}

滾動高度

對有doctype申明的頁面使用document.documentElement.scrollTop，safari特例獨(dú)行：使用 window.pageYOffset

function getScrollHeight() {
 return Math.max(document.documentElement.scrollTop,window.pageYOffset||0)
}

文檔高度

function getDocumentTop() {
 return document.documentElement.offsetHeight;
}

代碼實(shí)現(xiàn)

觸底打印

codepen 觸底打印demo

通過監(jiān)聽滾動事件來判斷 可視區(qū)域 ， 滾動高度 ， 文檔高度 的關(guān)系,實(shí)現(xiàn)最基礎(chǔ)的觸底加載

 <div id="app">
 <ul>
  <li v-for="item in list" :key="item" > {{item}}</li>
 </ul>
 </div>
 created(){
  // 初始化數(shù)據(jù)
  this.list = Array.from(Array(10),(item,index)=>index)
  // 通過監(jiān)聽滾動事件來判斷 可視區(qū)域 ， 滾動高度 ，文檔高度的關(guān)系
  window.addEventListener('scroll',()=>{
  let isBottom = (getScrollHeight() + getWindowHeight()) >= getDocumentTop()
  if(isBottom){
   console.log('觸底了',new Date())
   let list = this.list
   let last = list[list.length-1]
   let newList = Array.from(Array(10),(item,index)=>index+last+1)
   this.list.push(...newList)
  }
  })
 }

優(yōu)化和復(fù)用滾動事件邏輯

將滾動邏輯抽取成 mixins 放在 scroll.js 中。優(yōu)化功能點(diǎn)如下：

增加觸底距離
滾動事件監(jiān)聽事件節(jié)流
添加觸底動畫，并將 UI 樣式一起封裝在 scroll.js 中

模擬請求事件

為了模擬請求數(shù)據(jù)，封裝了一個 Promise 一秒后返回結(jié)果

methods:{
 // 返回一個 promise ，用于請求服務(wù)端數(shù)據(jù)
 findDataList(){
 let list = this.list
 let last = list[list.length-1]
 return new Promise((resolve)=>{
 // 模擬服務(wù)端數(shù)據(jù)
 let newList = Array.from(Array(10),(item,index)=>index+last+1)
  setTimeout(() => {
  resolve(newList)
  }, 1000);
 })
 }
}

滾動事件監(jiān)聽

滾動事件觸發(fā)，判斷當(dāng)前是否觸底，觸底了以后去執(zhí)行 loadMore 發(fā)起請求拿取服務(wù)端的數(shù)據(jù)

 created(){
 let fn = throttle(()=>{
  let isOver = (getScrollHeight() + getWindowHeight()) >= (getDocumentTop()- MIN_INSTANCE)
  // 觸底時進(jìn)行數(shù)據(jù)加載
  if(isOver){
  // 創(chuàng)建加載組件
  this.loadMore&&this.loadMore()
  }
 },DEALY_TIME)
 window.addEventListener('scroll',fn)
 },

添加觸底動畫

因?yàn)槲覀兪菍⑦壿嫵殡x在 mixins中，為了把觸底動畫也集成在里面使用 Vue.extend() 來實(shí)現(xiàn)編程式插入U(xiǎn)I樣式的方法。

首先定義好 loading 組件的樣式

<template>
 <div id="loading-alert">
  <i class="el-icon-loading"></i>
  <span>{{ message }}</span>
 </div>
</template>

<script>
export default {
 props:{
 message:{
  type:String,
  default:'正在加載更多數(shù)據(jù)'
 }
 },
};

當(dāng)觸底時去插入這個 loading 組件

import load from './load.vue'
data(){
 return {
 isLoading:false,
 component:null
 }
},
created(){
 let fn = throttle(()=>{
 let isOver = (getScrollHeight() + getWindowHeight()) >= (getDocumentTop()- MIN_INSTANCE)
 // 觸底時進(jìn)行l(wèi)oad組件顯示
 if(isOver){
  // 判斷l(xiāng)oading組件是否已經(jīng)存在，不存在就創(chuàng)建一個
  if(!this.component){
  this.component = extendComponents(load)
  }
  // 創(chuàng)建加載組件
  this.loadMore&&this.loadMore()
  // 判斷當(dāng)前狀態(tài)來控制loading的組件顯示與否
  if(!this.isLoading){
  this.component.$el.remove()
  // 將loading組件置為空
  this.component = null
  }
 }
 },DEALY_TIME)
 window.addEventListener('scroll',fn)
},

詳細(xì)代碼

完整代碼可以點(diǎn)擊查看 codepen 觸底動畫關(guān)于上面代碼中 extendComponents 方法的實(shí)現(xiàn)可以查看詳細(xì)代碼，也可以查看 Vue.extend 編程式插入組件

最后

將滾動觸底的邏輯和 UI 都集成到 scroll.js 中，復(fù)用都方式可以放在 mixins 可以抽離成 v-directive,這樣我們可以接受到綁定的 dom 不僅僅可以做 window 的滾動觸底事件的判斷，也可以 實(shí)現(xiàn)單個元素的滾動事件觸底的監(jiān)聽 。后續(xù)可以在實(shí)現(xiàn) v-directive 的版本。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: