better-scroll踩坑之scrollStart、scroll与scrollEnd-工作笔记

在使用better-scroll实现动态下滑隐藏底部导航时遇到问题:滚动结束时导航会突然上移。通过调整事件处理,改为在`scrollStart`时隐藏导航,并在`scroll`中判断滑动结束时显示,解决了连续滑动导致的导航状态异常问题。
摘要由CSDN通过智能技术生成

前两天老板说新增一个效果
在这里插入图片描述
实现效果图,隐藏了,效果是动态的下滑,没弄gif哈(有空再整)
在这里插入图片描述
在滑动的时候让底部导航slidedown(下滑隐藏)、滑动停止的时候slidup(上移显示);
基于原项目使用的better-scroll实现。
动画效果是使用animate库 + vue实现的,这个跟坑没关系,代码就不贴了(需要就发)。
一开始实现思路是这样的:
在滑动的时候我就让他下滑隐藏,滑动停止的时候就上移显示,em,正常来说是这样的

/*初始化
import Scroller from 'better-scroll';
this.scroller = new Scroller(element);
*/

this.scroller.on('scroll', () => {
	//实现下滑隐藏
})
this.scroller.on('scrollEnd', () => {
	//实现上移显示
})

当你滑动时确实是隐藏了,等他自动停止时确实也显示了。
好,然后问题来了
当你触摸离开屏幕时,它还会滑动一段距离对吧,当它还没有停止滑动的时候,你再次触摸滑动,它会触发scr

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值