<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>

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

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

<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>沒有更多了</span>  </div> </div></template><script type="text/babel"> import axios from 'axios' const CancelToken = axios.CancelToken export default {  data() {   return {    /**     * 總頁數(shù)（由服務(wù)端返回）     * @type {number}     */    count: 0,    /**     * 是否正在拖拽中     * @type {boolean}     */    dragging: false,    /**     * 已加載次數(shù)     * @type {number}     */    times: 0,    /**     * 已開始記載     * @type {boolean}     */    started: false,    /**     * 正在加載中     * @type {boolean}     */    loading: false,   }  },  props: {   /**    * 初始化后自動開始加載數(shù)據(jù)    */   autoload: {    type: Boolean,    default: true,   },   /**    * 離組件最近的可滾動父級元素（用于監(jiān)聽事件及獲取滾動條位置）    */   container: {    // Selector or Element    default: 'body',   },   /**    * 禁用組件    */   disabled: {    type: Boolean,    default: false,   },   /**    * Axios請求參數(shù)配置對象    * {@link https://github.com/mzabriskie/axios#request-config}    */   options: {    type: Object,    default: null,   },   /**    * 起始頁碼    */   page: {    type: Number,    default: 1,   },   /**    * 每頁加載數(shù)據(jù)條數(shù)    */   rows: {    type: Number,    default: 10,   },   /**    * 數(shù)據(jù)加載請求地址    */   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   },   /**    *重新開始加載    */   restart() {    this.reset()    this.load()   },   /**    * 鼠標按下事件處理函數(shù)    * @param {Object} e - 事件對象    */   pointerdown(e) {    if (this.disabled || !this.loadable || this.loading) {     return    }    this.dragging = true    this.pageY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY   },   /**    * 鼠標移動事件處理函數(shù)    * @param {Object} e - 事件對象    */   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)向下滾動到頁面最底部    if (moveY < 0 && (container.scrollTop + Math.min(     global.innerHeight,     container.clientHeight,    )) >= container.scrollHeight) {     // 阻止原生的上拉拖動會露出頁面底部空白區(qū)域的行為（主要針對iOS版微信）     e.preventDefault()     // 如果上拉距離超過50像素，則加載下一頁     if (moveY < -50) {      this.pageY = pageY      this.load()     }    }   },   /**    * 鼠標松開事件處理函數(shù)    */   pointerup() {    this.dragging = false   },  }, }</script>