解释一下scroll/index.vue这几个事件

解释一下scroll/index.vue这几个事件

scroll(){}

scrollEnd () {}

touchEnd () {}

pullDownEnd () {}

pullUpEnd () {}

这几个时机分别是什么时候触发 以及里面大概处理了什么功能

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2019-09-09 18:30:05

同学你好,上面有说哦,过渡结束时触发,不过这里是滚动条停止时触发。因为这个滚动是在过渡之后停止的。

http://img1.sycdn.imooc.com//climg/5d76262f000136e006800068.jpg

也可以选择这个滚动条,会发现里面是有过渡的,这个是在swiper中封装好的哦。

http://img1.sycdn.imooc.com//climg/5d76296e0001ec9411330948.jpg

希望能帮助到你,祝学习愉快!

好帮手慕糖 2019-09-09 14:13:32

同学你好,1、如下sliderMove(Swiper的事件,用户触摸并将手指移过Swiper并移动它时,将触发sliderMove事件。);在sliderMove的时候,执行scroll事件。

这里主要是实现滚动的时候(下拉或者上拉)的文字变化;

http://img1.sycdn.imooc.com//climg/5d75e8d7000190d708810141.jpg

2、同样的是上图,transitionEnd是swiper 所提供的事件(过渡结束时触发);这里是在触发这个事件的时候,执行scrollEnd事件。

3、touchend 手指从屏幕时移开时触发;

冒号前面的touchend是事件,在执行这个事件的时候,执行后面this.touchEnd(我们自己定义的事事件,如下图);在手指从屏幕时移开时触发(这里主要是用于实现松手刷新)

http://img1.sycdn.imooc.com//climg/5d75ea870001085e05660217.jpg

4、pullDownEnd是在下拉的时候触发的事件;设置加载完成之后的一些数据,比如:文字提醒设置为加载之后的。可以进行回弹等。

http://img1.sycdn.imooc.com//climg/5d75eb210001015107470065.jpg

http://img1.sycdn.imooc.com//climg/5d75eb460001bb3909180400.jpg

5、pullUpEnd是上拉的时候进行的事件,功能可以参考上面下拉的;如下:

http://img1.sycdn.imooc.com//climg/5d75ebad0001894e06960048.jpg

http://img1.sycdn.imooc.com//climg/5d75ebb4000133a708320234.jpg

这几个在“实战:Vue webAPP首页开发”课程的第五以及第六章中都是有讲的,可以在回顾下课程哦。

http://img1.sycdn.imooc.com//climg/5d75ed840001d01808380497.jpg

希望能帮助到你,祝学习愉快!

  • 提问者 JJJustin #1
    scroll和touchend都知道 transitionEnd是滚动条停止滚动时触发吗
    2019-09-09 14:16:56
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师