移动端刷新组件XtnScroll--Vue实现_vue 滑动刷新组件-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaotuni/article/details/76795346

本文介绍了一个基于Vue框架实现的上拉加载更多和下拉刷新功能的组件。该组件通过监听触摸事件来判断用户的滑动方向，并根据滑动方向触发相应事件。文章提供了组件的基本使用方法及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XtnScroll –Vue

之前写了一个Angular实现刷新的，今天用Vue也实现一下吧，核心代码都差不多，判断滑动方法，是向上，还是向下，向左或向右。其它的就是各种代码自己一些特性吧。

后台是NodeJs提供接口调用，具体的可以看一下 https://github.com/xiaotuni/angular-map-http2 里的server目录里，把NodeJs启动起来就以了。少什么接口，配置相应的接口就可以用了。具体配置可参考之前的篇幅【Angular4+NodeJs+MySQL 入门-06 接口配置】，当然也用自己提供的了。

看一下效果吧

这里写图片描述

不过这个写的不是很完美，大概的实现了一下，上拉加载下一页数据，下拉获取最新数据的功能，也算是标记一下吧。

由于Vue将样式scss, 模板- html 以及代码都在一个文件里了，所以创建一个文件 XtnScroll.vue。
里面的具体内容就不全在这里粘贴了。点击这查看原文件

定义了几个属性

刷新-OnRefresh 事件
上拉 OnNextData事件;
刷新是否完成 RefreshDataIsComplete
上拉是否完成 NextDataIsComplete
Percentage 滚动的百分比

  props: {
    NextDataIsComplete: { type: Boolean },
    RefreshDataIsComplete: { type: Boolean },
    Percentage: { type: Number },
    OnNextData: { type: Function },
    OnRefresh: { type: Function },
  },

三个touch事件

methods: {
    OnTouchStart(event):{},
    OnTouchMove(event):{}
    OnTouchEnd(event):{}
}

如何在其它页面上怎么使用呢

引入组件

import {XtnScroll} from ‘@/components/Core’

让页面识别,component里加进入去，导入之后就可以用了。

 components: {
    'xtn-scroll': XtnScroll,
  }

template里添加下面代码，基本上就OK了。

<xtn-scroll :OnNextData="NextData" :NextDataIsComplete="ThisNextDataIsComplete" :Percentage="10" :OnRefresh="RefreshData" :RefreshDataIsComplete="ThisRefreshDataIsComplete">
  <div class="group">
    <div class="rowInfo" v-for="(item,index) in DataList">
      <div class="number">{{item.AreaId+1}}</div>
      <div class="guid">{{item.AreaName}}</div>
    </div>
  </div>
</xtn-scroll>