vue移动端实现下拉刷新


Posted in Javascript onApril 22, 2018

看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件

说这个功能之前,大家要先了解一下,要怎么触发滚动条事件。

vue移动端实现下拉刷新

一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样,

只要满足子元素宽度大于父元素宽度就可以了。(下篇文章会讲怎么实现一个横向滚动条)

接入正题!!!

先来看看怎么剖析这个下拉刷新。

要用到的移动端的三个事件: touchstart(手指按下),touchmove(手指移动),touchend(手指离开)

下拉刷新也就是(touchstart => touchmove(下移动) =>touchend)的一个过程

大体思路:

下拉主要与手指触摸y轴点有关

1.记录下手指按下y轴的坐标点

2.记录手指移动时,移动的距离(注意:要判断手指是向上移还是向下移,向上移就是滚动)

3.启动下拉刷新事件

看代码:

vue中要在methods里面注册事件,在绑定到父元素上,这里大家应该都是用vue-cli搭建的项目了吧!

没有的话,我回头给个链接给大家,里面有已经搭建好的项目结构。包含这个插件的源码,demo都在里面1

<template>
<div class="parent">


<div class="child"></div>

</div>
</template>
<script>
export default {

data(){


return {



top: 0,



startY: 0,     // 保存 y轴点的位置



touching: false,  // 代表当前是否处于 下拉刷新行为的开关,也就是当属于滚动行为时,就要退出该事件机制


}


},

methods: {


touchStart(e) {



// e代表该事件对象,e.targetTouches[0].pageY可以拿到手指按下的 y轴点



this.startY = e.targetTouches[0].pageY



// 开启下拉刷新状态



this.touching = true






},


touchMove(e) {
 

 //这个 touchMove,只要页面在动都会发生的,所以 touching就起作用了



// 如果 touching为false,说明这个正在移动的页面不是我们想要的下拉刷新,有可能是用户随意拉了一下页面而已,或者其他



if(!this.touching) return



// 获取移动的距离



let diff = e.targetToc=uches[0].pageY - this.startY 



//判断是向上拉还是向下拉 



if(diff >0) { 




e.preventDefault()



} else {




return 




}



//这个this.top要对应绑定到该元素的transform: translateY(+top+ 'px')上,不然是无法拉动的



// 因此这里还要对偏移高度做一下处理,直接设置diff +(this.state === 2 ? 40 : 0) 太快了,因为拉取幅度太大



// 让diff*0.25这样子就差不多了



 this.top = Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0)



if(this.top >= 40){




this.state = 1  //代表正在拉取



} else {




this.state = 0 // 代表初始转态



}
 


},


touchEnd(e) {



this.touching = false



if(this.state === 2) {




this.top = 40




return 



}



// 判断抬起时的高度,是大于40 就开启刷新



if(this.top >= 40) {




this.refresh()



} else {




this.state = 0




this.top = 0



}


},


refresh() {



this.state = 2



this.top = 40



const self = this



// 这里可以调用父组件的方法去请求刷新接口



this.$emit('getRefresh', function(self){




//传个回调过去,请求完数据就复原




self.state = 0




self.top = 0



})


}

}

}
</script>

vue移动端实现下拉刷新

到这里就完结了,当然现在肯定不能直接用的,要结合你的实际业务逻辑来用的,

我把demo放到github上了 :

https://github.com/13725102796/css3-demo/blob/master/src/plugins/scroll/scroll.vue

看不懂的,建议整个项目拉下拉,跑一下,里面还有检验的插件,弹窗的等等,都是我在项目中用到,再抽出来的。

方法: git clone https://github.com/13725102796/css3-demo.git

Javascript 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
axios向后台传递数组作为参数的方法
Aug 11 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
实例讲解Vue.js中router传参
Apr 22 #Javascript
用Vue写一个分页器的示例代码
Apr 22 #Javascript
vue-cli3.0 特性解读
Apr 22 #Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 #Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 #Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 #Javascript
You might like
实用函数7
2007/11/08 PHP
php全角字符转换为半角函数
2014/02/07 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JS document form表单元素操作完整示例
2020/01/13 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python自定义简单图轴简单实例
2018/01/08 Python
python的命名规则知识点总结
2019/10/04 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
2014道德模范事迹材料
2014/02/16 职场文书
小学生差生评语
2014/12/29 职场文书
大学生自荐书范文
2015/03/05 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
大学生实习推荐信
2015/03/27 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
欧元符号 €
2022/02/17 杂记