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

106 阅读 0 评论 70 点赞

我是靠谱客的博主勤恳过客，最近开发中收集的这篇文章主要介绍better-scroll踩坑之scrollStart、scroll与scrollEnd-工作笔记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前两天老板说新增一个效果
在这里插入图片描述
实现效果图，隐藏了，效果是动态的下滑，没弄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', () => {
	//实现上移显示
}）

当你滑动时确实是隐藏了，等他自动停止时确实也显示了。
好，然后问题来了
当你触摸离开屏幕时，它还会滑动一段距离对吧，当它还没有停止滑动的时候，你再次触摸滑动，它会触发scrollEnd事件（当你再次触碰屏幕他会默认你上一次滑动已经结束），也就是此时底部导航会马上上移，这不是我们希望看到的效果。
接着想到防抖debounce事件，好，我加了，此时又出现一个问题（我加在了scrollEnd上，所以会出现问题，最后面实现方式改了，加在scroll就行了）

this.scroller.on('scrollEnd', debounce(() => {
	//实现上移显示
}),800)

问题就是这个scrollEnd会触发两次（第一次滑动未结束时，接着触摸滑动触发第一次，滑动结束触发第二次），这样在滑动我们看到就是忽上忽下，我们只希望它在滑动的时候触发一次。
最后换个思路，在scroll事件的时候来判断时候滑动结束。（大佬帮助）

现在代码改成这样了，不用scrollEnd事件了，在scrollStart的时候就实现隐藏，当判断到滑动结束时显示

let scrollVal = null;//存储滑动的变量
let timer = null; //定时器
this.scroller.on('scrollStart', () => {
       //实现下滑隐藏
});

this.scroller.on('scroll', (val) => {
	if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          /* 判断是否已经滚动结束，不能写在scrollEnd，有bug */
          if (val === scrollVal) {
          	//实现上移
          }
        }, 500);
        scrollVal = val;
}）

又有一个新的解决方式，其实原理差不多

 Debounce(fn, delay = 500) { 
    let timeout = null;
    return function (...args) {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
       fn.apply(this, args);
        }, delay);
     };
 },
this.scroller.on('scroll', this.Debounce(() => {
       //实现上移
 }), 500);

至此，完美解决，啊舒服！