vue loadmore组件上拉加载更多功能示例代码

最近在做移动端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
   },
  },
  ···
}

基本上主干已经算完工了，一些props传入或者一些逻辑控制细节需要再额外添加，贴出整个组件的源码：

<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 {
    /**
     * 总页数（由服务端返回）
     * @type {number}
     */
    count: 0,
    /**
     * 是否正在拖拽中
     * @type {boolean}
     */
    dragging: false,
    /**
     * 已加载次数
     * @type {number}
     */
    times: 0,
    /**
     * 已开始记载
     * @type {boolean}
     */
    started: false,
    /**
     * 正在加载中
     * @type {boolean}
     */
    loading: false,
   }
  },
  props: {
   /**
    * 初始化后自动开始加载数据
    */
   autoload: {
    type: Boolean,
    default: true,
   },
   /**
    * 离组件最近的可滚动父级元素（用于监听事件及获取滚动条位置）
    */
   container: {
    // Selector or Element
    default: 'body',
   },
   /**
    * 禁用组件
    */
   disabled: {
    type: Boolean,
    default: false,
   },
   /**
    * 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: '',
   },
  },
  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: {
   /**
    * 加载一组数据的方法
    */
   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')
    })
   },
   /**
    * 重置加载相关变量
    */
   reset() {
    this.count = 0
    this.times = 0
    this.started = false
    this.loading = false
   },
   /**
    *重新开始加载
    */
   restart() {
    this.reset()
    this.load()
   },
   /**
    * 鼠标按下事件处理函数
    * @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
   },
   /**
    * 鼠标移动事件处理函数
    * @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
    // 如果已经向下滚动到页面最底部
    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
   },
  },
 }
</script>

以上所述是小编给大家介绍的vue loadmore组件上拉加载更多功能示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vue  # loadmore  # 上拉加载更多  # 基于vue封装下拉刷新上拉加载组件  # vue瀑布流组件实现上拉加载更多  # vue实现的上拉加载更多数据/分页功能示例  # vueScroll实现移动端下拉刷新、上拉加载  # vue插件mescroll.js实现移动端上拉加载和下拉刷新  # vue移动端下拉刷新和上拉加载的实现代码  # vue2.0 移动端实现下拉刷新和上拉加载更多的示例  # 基于vue2实现上拉加载功能  # vue.js移动端app之上拉加载以及下拉刷新实战  # vue基于vant实现上拉加载下拉刷新的示例代码  # 加载  # 鼠标  # 按下  # 拖动  # 下一页  # 绑定  # 回调  # 分页  # 小编  # 正在加载  # 都是  # 就会  # 在此  # 不太  # 有一定  # 将其  # 每页  # 这是一个  # 给大家  # 很简单 

相关文章： ,怎么用自己头像做动态表情包？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  建站之星导航如何优化提升用户体验？  定制建站哪家更专业可靠？推荐榜单揭晓  网站制作员失业,怎样查看自己网站的注册者？  建站ABC备案流程中有哪些关键注意事项？  ,有什么在线背英语单词效率比较高的网站？  如何高效利用亚马逊云主机搭建企业网站？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  如何用5美元大硬盘VPS安全高效搭建个人网站？  江苏网站制作公司有哪些,江苏书法考级官方网站？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  建站之星展会模板：智能建站与自助搭建高效解决方案  如何快速上传自定义模板至建站之星？  Python路径拼接规范_跨平台处理说明【指导】  建站主机默认首页配置指南：核心功能与访问路径优化  宁波自助建站系统如何快速打造专业企业网站？  宝塔建站后网页无法访问如何解决？  攀枝花网站建设,攀枝花营业执照网上怎么年审？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  香港服务器如何优化才能显著提升网站加载速度？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  制作旅游网站html,怎样注册旅游网站？  建站之星2.7模板：企业网站建设与h5定制设计专题  如何快速配置高效服务器建站软件？  平台云上自助建站如何快速打造专业网站？  如何在VPS电脑上快速搭建网站？  建站与域名管理如何高效结合？  如何选择建站程序？包含哪些必备功能与类型？  黑客入侵网站服务器的常见手法有哪些？  如何快速搭建虚拟主机网站？新手必看指南  nginx修改上传文件大小限制的方法  实惠建站价格推荐：2025年高性价比自助建站套餐解析  小型网站建站如何选择虚拟主机？  如何选择适配移动端的WAP自助建站平台？  建站主机与虚拟主机有何区别？如何选择最优方案？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  如何在IIS中新建站点并配置端口与物理路径？  建站之星如何开启自定义404页面避免用户流失？  h5在线制作网站电脑版下载,h5网页制作软件？  如何通过老薛主机一键快速建站？  安云自助建站系统如何快速提升SEO排名？  贸易公司网站制作流程,出口贸易网站设计怎么做？  网站制作需要会哪些技术,建立一个网站要花费多少？  存储型VPS适合搭建中小型网站吗？  建站之星收费标准详解：套餐费用及年费价格表一览  建站之星免费模板：自助建站系统与智能响应式一键生成