快捷導(dǎo)航

vue loadmore組件上拉加載更多功能示例代碼

更新時(shí)間：2017年07月19日 10:04:56 作者：BenjaminShih

這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下

最近在做移動(dòng)端h5頁(yè)面，所以分頁(yè)什么的就不能按照傳統(tǒng)pc端的分頁(yè)器的思維去做了，這么小的屏幕去點(diǎn)擊也不太方便一般來(lái)講移動(dòng)端都是上拉加載更多，符合正常使用習(xí)慣。

首先簡(jiǎn)單寫(xiě)一下模板部分的html代碼,，很簡(jiǎn)單清晰的邏輯：

<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>沒(méi)有更多了</span>
  </div>
 </div>
</template>

然后就是業(yè)務(wù)部分了

在動(dòng)手寫(xiě)組件之前，先理清需求：

加載頁(yè)面 -> 滑到底部 -> 上拉一定距離 -> 加載第二頁(yè) -> 繼續(xù)前面步驟 -> 沒(méi)有更多

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

首屏自動(dòng)加載第一頁(yè) -> 滑動(dòng)到底部&&按下時(shí)候滑動(dòng)距離Y軸有一定偏移量 -> 請(qǐng)求后端加載第二頁(yè) -> 根據(jù)返回字段判斷是否還有下一頁(yè)

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

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

如果沒(méi)有解綁的話，每次你加載組件，就會(huì)綁定一次事件…

然后我們需要一些核心事件回調(diào)方法來(lái)在合適的時(shí)間加載數(shù)據(jù)渲染頁(yè)面, 回想一下，第一我們需要http獲取數(shù)據(jù)的load函數(shù)，然后我們需要三個(gè)綁定事件的回調(diào)函數(shù)pointDown(), pointMove(), pointUp(),分別對(duì)應(yīng)用戶按下、移動(dòng)、彈起手指操作：

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

基本上主干已經(jīng)算完工了，一些props傳入或者一些邏輯控制細(xì)節(jié)需要再額外添加，貼出整個(gè)組件的源碼：

<template>
 <div class="loadmore">
  <!-- <div class="loadmore__header"></div> -->
  <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>沒(méi)有更多了</span>
  </div>
 </div>
</template>
<script type="text/babel">
 import axios from 'axios'
 const CancelToken = axios.CancelToken
 export default {
  data() {
   return {
    /**
     * 總頁(yè)數(shù)（由服務(wù)端返回）
     * @type {number}
     */
    count: 0,
    /**
     * 是否正在拖拽中
     * @type {boolean}
     */
    dragging: false,
    /**
     * 已加載次數(shù)
     * @type {number}
     */
    times: 0,
    /**
     * 已開(kāi)始記載
     * @type {boolean}
     */
    started: false,
    /**
     * 正在加載中
     * @type {boolean}
     */
    loading: false,
   }
  },
  props: {
   /**
    * 初始化后自動(dòng)開(kāi)始加載數(shù)據(jù)
    */
   autoload: {
    type: Boolean,
    default: true,
   },
   /**
    * 離組件最近的可滾動(dòng)父級(jí)元素（用于監(jiān)聽(tīng)事件及獲取滾動(dòng)條位置）
    */
   container: {
    // Selector or Element
    default: 'body',
   },
   /**
    * 禁用組件
    */
   disabled: {
    type: Boolean,
    default: false,
   },
   /**
    * Axios請(qǐng)求參數(shù)配置對(duì)象
    * {@link https://github.com/mzabriskie/axios#request-config}
    */
   options: {
    type: Object,
    default: null,
   },
   /**
    * 起始頁(yè)碼
    */
   page: {
    type: Number,
    default: 1,
   },
   /**
    * 每頁(yè)加載數(shù)據(jù)條數(shù)
    */
   rows: {
    type: Number,
    default: 10,
   },
   /**
    * 數(shù)據(jù)加載請(qǐng)求地址
    */
   url: {
    type: String,
    default: '',
   },
  },
  computed: {
   /**
    * 是否可以加載
    * @returns {boolean} 是與否
    */
   loadable() {
    return !this.disabled && (!this.started || (this.page + this.times) <= this.count)
   },
  },
  mounted() {
   let container = this.container
   if (container) {
    if (typeof container === 'string') {
     container = document.querySelector(container)
    } else if (!container.querySelector) {
     container = document.body
    }
   }
   if (!container) {
    container = document.body
   }
   this.$container = container
   this.onPointerDown = this.pointerdown.bind(this)
   this.onPointerMove = this.pointermove.bind(this)
   this.onPointerUp = this.pointerup.bind(this)
   if (global.PointerEvent) {
    container.addEventListener('pointerdown', this.onPointerDown, false)
    container.addEventListener('pointermove', this.onPointerMove, false)
    container.addEventListener('pointerup', this.onPointerUp, false)
    container.addEventListener('pointercancel', this.onPointerUp, false)
   } else {
    container.addEventListener('touchstart', this.onPointerDown, false)
    container.addEventListener('touchmove', this.onPointerMove, false)
    container.addEventListener('touchend', this.onPointerUp, false)
    container.addEventListener('touchcancel', this.onPointerUp, false)
    container.addEventListener('mousedown', this.onPointerDown, false)
    container.addEventListener('mousemove', this.onPointerMove, false)
    container.addEventListener('mouseup', this.onPointerUp, false)
   }
   if (this.autoload) {
    this.load()
   }
  },
  // eslint-disable-next-line
  beforeDestroy() {
   const container = this.$container
   if (global.PointerEvent) {
    container.removeEventListener('pointerdown', this.onPointerDown, false)
    container.removeEventListener('pointermove', this.onPointerMove, false)
    container.removeEventListener('pointerup', this.onPointerUp, false)
    container.removeEventListener('pointercancel', this.onPointerUp, false)
   } else {
    container.removeEventListener('touchstart', this.onPointerDown, false)
    container.removeEventListener('touchmove', this.onPointerMove, false)
    container.removeEventListener('touchend', this.onPointerUp, false)
    container.removeEventListener('touchcancel', this.onPointerUp, false)
    container.removeEventListener('mousedown', this.onPointerDown, false)
    container.removeEventListener('mousemove', this.onPointerMove, false)
    container.removeEventListener('mouseup', this.onPointerUp, false)
   }
   if (this.loading && this.cancel) {
    this.cancel()
   }
  },
  methods: {
   /**
    * 加載一組數(shù)據(jù)的方法
    */
   load() {
    if (this.disabled || this.loading) {
     return
    }
    this.started = true
    this.loading = true
    const params = {
     currentPage: this.page + this.times,
     pageSize: this.rows,
    }
    const options = Object.assign({}, this.options, {
     url: this.url,
     cancelToken: new CancelToken((cancel) => {
      this.cancel = cancel
     }),
    })
    if (String(options.method).toUpperCase() === 'POST') {
     options.data = Object.assign({}, options.data, params)
    } else {
     options.params = Object.assign({}, options.params, params)
    }
    this.$axios.request(options).then((res) => {
     const data = res.result
     this.times += 1
     this.loading = false
     this.count = data.pageCount
     this.$emit('success', data.list)
     this.$emit('complete')
    }).catch((e) => {
     this.loading = false
     this.$emit('error', e)
     this.$emit('complete')
    })
   },
   /**
    * 重置加載相關(guān)變量
    */
   reset() {
    this.count = 0
    this.times = 0
    this.started = false
    this.loading = false
   },
   /**
    *重新開(kāi)始加載
    */
   restart() {
    this.reset()
    this.load()
   },
   /**
    * 鼠標(biāo)按下事件處理函數(shù)
    * @param {Object} e - 事件對(duì)象
    */
   pointerdown(e) {
    if (this.disabled || !this.loadable || this.loading) {
     return
    }
    this.dragging = true
    this.pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY
   },
   /**
    * 鼠標(biāo)移動(dòng)事件處理函數(shù)
    * @param {Object} e - 事件對(duì)象
    */
   pointermove(e) {
    if (!this.dragging) {
     return
    }
    const container = this.$container
    const pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY
    const moveY = pageY - this.pageY
    // 如果已經(jīng)向下滾動(dòng)到頁(yè)面最底部
    if (moveY < 0 && (container.scrollTop + Math.min(
     global.innerHeight,
     container.clientHeight,
    )) >= container.scrollHeight) {
     // 阻止原生的上拉拖動(dòng)會(huì)露出頁(yè)面底部空白區(qū)域的行為（主要針對(duì)iOS版微信）
     e.preventDefault()
     // 如果上拉距離超過(guò)50像素，則加載下一頁(yè)
     if (moveY < -50) {
      this.pageY = pageY
      this.load()
     }
    }
   },
   /**
    * 鼠標(biāo)松開(kāi)事件處理函數(shù)
    */
   pointerup() {
    this.dragging = false
   },
  },
 }
</script>

以上所述是小編給大家介紹的vue loadmore組件上拉加載更多功能示例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: