vue移动端实现下拉刷新

网友投稿 561 2023-02-08


vue移动端实现下拉刷新

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

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

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

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

接入正题!!!

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

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

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

大体思路:

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

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

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

3.启动下拉刷新事件

看代码:

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

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

  

    

  

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

我把demo放到github上了 :

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

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

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Spring Boot集成Quartz注入Spring管理的类的方法
下一篇:Java 给图片和动图添加水印的方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~