当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue loadmore 组件滑动加载更多源码解析

vue loadmore 组件滑动加载更多源码解析

2017年12月12日  | 移动技术网IT编程  | 我要评论

校园逐美录,丽江天气预报一周,洛克王国时间

讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。

既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意：

上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调

上拉加载主要计算触摸滚动距离，滑动加载主要计算container底部和视窗上边缘的距离

事件绑定改成： 

 mounted() {
  ···
  this.dom.addeventlistener('scroll', this.scroll, false)
  ···
 },
 beforedestroy() {
  ···
  this.dom.removeeventlistener('scroll', this.scroll, false)
  ···
 },

事件回调改为：

 /**
  * 滚动钩子
  */
  scroll() {
  const viewheight = global.innerheight
  let parentnode
  if (this.container !== global) {
   parentnode = this.$el
  } else {
   parentnode = this.$el.parentnode
  }
  if (parentnode) {
   // 获取vue实例使用的根 dom 元素相对于视口的位置
   const rect = parentnode.getboundingclientrect()
   // this.distance 离底部多少距离开始加载
   // 如果此元素底边距离视口顶部的距离小于视口高度加上distance之和，就加载下一页
   if ((rect.bottom <= viewheight + this.distance) && this.loadable && !this.loading) {
   this.load()
   }
  }
  },

源码如下：

<template>
 <div class="loadmore" ref="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>
<script type="text/babel">
 import axios from 'axios'
 const canceltoken = axios.canceltoken
 export default {
 data() {
  return {
  /**
   * 总页数（由服务端返回）
   * @type {number}
   */
  count: 0,
  /**
   * 是否正在拖拽中
   * @type {boolean}
   */
  dragging: false,
  /**
   * 已加载次数
   * @type {number}
   */
  times: 0,
  /**
   * 已开始记载
   * @type {boolean}
   */
  started: false,
  /**
   * 正在加载中
   * @type {boolean}
   */
  loading: false,
  dom: null,
  }
 },
 props: {
  /**
  * 初始化后自动开始加载数据
  */
  autoload: {
  type: boolean,
  default: true,
  },
  /**
  * 离组件最近的可滚动父级元素（用于监听事件及获取滚动条位置）
  */
  container: {
  // selector or element
  default: () => (global),
  },
  /**
  * axios请求参数配置对象
  * {@link https://github.com/mzabriskie/axios#request-config}
  */
  options: {
  type: object,
  default: null,
  },
  /**
  * 起始页码
  */
  page: {
  type: number,
  default: 1,
  },
  /**
  * 每页加载数据条数
  */
  rows: {
  type: number,
  default: 10,
  },
  /**
  * 数据加载请求地址
  */
  url: {
  type: string,
  default: '',
  },
  /**
  * 距离底部多远加载
  */
  distance: {
  type: number,
  default: 200,
  },
 },
 computed: {
  /**
  * 是否可以加载
  * @returns {boolean} 是与否
  */
  loadable() {
  return !this.started || (this.page + this.times) <= this.count
  },
 },
 mounted() {
  if (this.container !== global) {
  this.dom = document.queryselector(this.container)
  } else {
  this.dom = this.container
  }
  if (!this.dom) {
  return
  }
  this.dom.addeventlistener('scroll', this.scroll, false)
  if (this.autoload && !this.loading) {
  this.load()
  }
 },
 // eslint-disable-next-line
 beforedestroy() {
  if (this.dom) {
  this.dom.removeeventlistener('scroll', this.scroll, false)
  }
 },
 methods: {
  /**
  * 滚动钩子
  */
  scroll() {
  const viewheight = global.innerheight
  let parentnode
  if (this.container !== global) {
   parentnode = this.$el
  } else {
   parentnode = this.$el.parentnode
  }
  if (parentnode) {
   const rect = parentnode.getboundingclientrect()
   if ((rect.bottom <= viewheight + this.distance) && this.loadable && !this.loading) {
   this.load()
   }
  }
  },
  /**
  * 加载一组数据的方法
  */
  load() {
  if (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')
  })
  },
  /**
  * 重置加载相关变量
  */
  reset() {
  this.count = 0
  this.times = 0
  this.started = false
  this.loading = false
  },
  /**
  *重新开始加载
  */
  restart() {
  this.reset()
  this.load()
  },
 },
 }
</script>

以上所述是小编给大家介绍的vue loadmore 组件滑动加载更多源码解析，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网