Vue如何混入mixins滾動觸底

這篇文章主要介紹了Vue如何混入mixins滾動觸底，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前言

在app端常常看到類似加載數據的動畫，接下來我們來實現滾動觸底加載動畫提示，以及如何復用這些邏輯。

如何判斷滾動觸底

來看下幾張圖：

情況一：

當文檔高度還為超過可視區域高度時，不存在滾動，所以也沒有滾動觸底

情況二：

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

情況三：

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

判斷是否滾動到底

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

可視區域的高度

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

滾動高度

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

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

文檔高度

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

代碼實現

觸底打印

codepen 觸底打印demo

通過監聽滾動事件來判斷 可視區域 ， 滾動高度 ， 文檔高度 的關系,實現最基礎的觸底加載

 <div id="app">
 <ul>
  <li v-for="item in list" :key="item" > {{item}}</li>
 </ul>
 </div>
 created(){
  // 初始化數據
  this.list = Array.from(Array(10),(item,index)=>index)
  // 通過監聽滾動事件來判斷 可視區域 ， 滾動高度 ，文檔高度的關系
  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)
  }
  })
 }

優化和復用滾動事件邏輯

將滾動邏輯抽取成 mixins 放在 scroll.js 中。優化功能點如下：

1. 增加觸底距離

2. 滾動事件監聽事件節流

3. 添加觸底動畫，并將 UI 樣式一起封裝在 scroll.js 中

 模擬請求事件

為了模擬請求數據，封裝了一個 Promise 一秒后返回結果

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

滾動事件監聽

滾動事件觸發，判斷當前是否觸底，觸底了以后去執行 loadMore 發起請求拿取服務端的數據

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

添加觸底動畫

因為我們是將邏輯抽離在 mixins中，為了把觸底動畫也集成在里面使用 Vue.extend() 來實現編程式插入UI樣式的方法。

首先定義好 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:'正在加載更多數據'
 }
 },
};

當觸底時去插入這個 loading 組件

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue如何混入mixins滾動觸底”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!