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对象[0]是什么含义?
Jul 31 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
详解Bootstrap插件
Apr 25 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
vue实现移动端触屏拖拽功能
Aug 21 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
PHP的FTP学习(三)
2006/10/09 PHP
自动分页的不完整解决方案
2007/01/12 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
paypal即时到账php实现代码
2010/11/28 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
Python 循环终止语句的三种方法小结
2019/06/24 Python
python pygame实现球球大作战
2019/11/25 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
班风学风建设方案
2014/05/06 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
廉洁自律个人总结
2015/02/14 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
详解Java实现数据结构之并查集
2021/06/23 Java/Android