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上拉是否完成 NextDataIsCompletePercentage 滚动的百分比 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>