这篇小作文有点长,不想看的朋友可以直接去找找vant组件中的 van-pull-refresh
朋友们,我这两天干了一件蠢事
最近我们公司有一个移动端项目,是嵌在微信公众号中的,有一个新需求是给页面加上下拉刷新的功能。
就是这个功能,我研究了两天,开始的时候,我自己封装了一个组件,试了之后发现在微信浏览器中打开没有效果,
之后我就上网查,说是微信的touchevent事件和我自己的touchevent事件冲突了,所以我的下拉刷新功能就没有用。解决方案是在touchmove监听方法中添加e.preventDefault()阻止默认事件,这样就能实现下拉刷新了。
嗯,加了e.preventDefault()之后确实有用了。但是,我发现页面没法滚动了,overflow-y:auto; 它没有用。啊!我裂开了
我研究一番发现click事件是在touchend事件之后,我在touchend事件就e.preventDefault(),所以click事件自然就没办法监听到了。touchstart—>touchmove—>touchend—>click,它们是这样一个顺序。
嘿嘿嘿嘿,这不是挺好的吗,找到问题,就去解决它。
还是我太年轻,我试了各种方法去添加e.preventDefault(),结果都不尽人意,总而言之就是鱼(页面向下滚动)与熊掌(页面下拉刷新)不可兼得。因为时间问题,我决定用组件。
就这样我又走进另外一条死胡同里,我试过大概4-5种组件,都会因为在微信浏览器中打开而产生各种各样的问题,就…无语…(也可能是我太菜,没找到有效解决方法)
然后我去找其他同事沟通,说这个需求不可能实现。
我同事:你用的是vantui吧?
我:嗯。
我同事:van-pull-refresh不能用吗?
我:嗯?还有这个,我怎么忘了
说完之后我马上回去安排起来。
诶,你别说,不仅能用,还挺香的。
所以,经过这个事情之后,我总结,有轮子就用轮子,找不到轮子再自己造。
当你的思路出现闭环,千万不要继续下去了,找其他人聊聊天,拨云见日终有时,守得云开见月明