最近在做移動端h5頁面，所以分頁什么的就不能按照傳統pc端的分頁器的思維去做了，這么小的屏幕去點擊也不太方便一般來講移動端都是上拉加載更多，符合正常使用習慣。

首先簡單寫一下模板部分的html代碼,，很簡單清晰的邏輯：

<template> <div class="loadmore">  <div class="loadmore__body">   <slot></slot>  </div>  <div class="loadmore__footer">   <span v-if="loading">    <i class="tc-loading"></i>    <span>正在加載</span>   </span>   <span v-else-if="loadable">上拉加載更多</span>   <span v-else>沒有更多了</span>  </div> </div></template>

然后就是業務部分了

在動手寫組件之前，先理清需求：

加載頁面 -> 滑到底部 -> 上拉一定距離 -> 加載第二頁 -> 繼續前面步驟 -> 沒有更多

這是一個用戶交互邏輯，而我們需要將其映射為代碼邏輯：

首屏自動加載第一頁 -> 滑動到底部&&按下時候滑動距離Y軸有一定偏移量 -> 請求后端加載第二頁 -> 根據返回字段判斷是否還有下一頁

有了代碼邏輯，主干就出來了，加載和判斷由事件來控制，而又作為一個vue組件，我們需要配合vue生命周期來掛載事件和銷毀事件

export default {  mounted() {    // 確定容器    // 容器綁定事件  },  beforeDestory() {    // 解綁事件  },}

如果沒有解綁的話，每次你加載組件，就會綁定一次事件…

然后我們需要一些核心事件回調方法來在合適的時間加載數據渲染頁面, 回想一下，第一我們需要http獲取數據的load函數，然后我們需要三個綁定事件的回調函數pointDown(), pointMove(), pointUp(),分別對應用戶按下、移動、彈起手指操作：

export default {  ···  methods：{   /**    * 加載一組數據的方法    */   load() {     // 設置options    this.$axios.request(options).then((res) => {      // 獲取數據后的處理    }).catch((e) => {     // 異常處理    })   },    /**    * 鼠標按下事件處理函數    * @param {Object} e - 事件對象    */   pointerdown(e) {    // 獲取按下的位置    this.pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY   },    /**    * 鼠標移動事件處理函數    * @param {Object} e - 事件對象    */   pointermove(e) {    const container = this.$container    const pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY    const moveY = pageY - this.pageY    // 如果已經向下滾動到頁面最底部    if (moveY < 0 && (container.scrollTop + Math.min(     global.innerHeight,     container.clientHeight,    )) >= container.scrollHeight) {     // 阻止原生的上拉拖動會露出頁面底部空白區域的行為（主要針對iOS版微信）     e.preventDefault()     // 如果上拉距離超過50像素，則加載下一頁     if (moveY < -50) {      this.pageY = pageY      this.load()     }    }   },    /**    * 鼠標松開事件處理函數    */   pointerup() {    // 這邊就是取消拖動狀態，需要注意在拖動過程中不要再次觸發一些事件回調，否側亂套    this.dragging = false   },  },  ···}