使用Better-Scroll遇到的坑

  1. 让绝对定位失效:之前做好的吸顶,用了position:sticky,但引入better-scroll就失效了,因为fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效,scale(),rotate()都会使fixed定位失效。这里使用offsetTop来获取滚动的高度,设计好滚到多少开始吸顶
  2. 引入bs之后要注意设置高度,wrapper一定要比内容高度小,如果设置Height:100%-xxpx,那么要注意父元素需要设置高度。
  3. 有时会遇到滚到一半就不能滚动了,是因为刚开始请求的数据不完全,比如图片只请求了一半,这样就会导致bs计算高度不正确,所以需要监听图片加载,执行scroll.refresh()
  4. refresh()报错,找不到该属性,是因为我们把函数的调用放在created中,这个阶段还没有挂载el,自然找不到对象,放在mounted中解决。
  5. 防抖debounce,监听图片加载时@load='imageLoad',如果不设置防抖,那么每加载一张图片就会执行一次监听,十分浪费资源,所以使用防抖来减少这种函数的调用
debounce(func,delay){
	let timer = null;
	return function(...args) {
		if(timer){clearTimeout(timer)}
		timer = setTimeout(()=>{
			func.apply(this,args)
		},delay)
	}
}

better-scroll和原生滚动的区别
原生滚动是整个页面滚动,移动端看会一卡一卡的,十分僵硬。
better-scroll则是设置了一个固定的高度作为滚动区域,内部包裹的内容高度一定高于设置的高度
使用Better-Scroll遇到的坑_第1张图片
相当于是这样的,内部会在外部这个区域内滚动。

6.想监听使用bscroll页面的滚动位置,思路:封装的bscroll组件内发送事件,监听的页面中监听,然后打印position即可。(注意,监听不到滚动是因为probetype没设置为3)

 mounted() {
 //创建实例对象接受bscroll
    this.bscroll = new BScroll(this.$refs.wrapper, {
      click:this.click,
      probeType:this.probeType,
      pullUpLoad:this.pullUpLoad
    })
    //发送滚动事件
    this.bscroll.on('scroll',(position)=>{
      this.$emit('scroll',position)
    })
    //发送上拉加载事件
    this.bscroll.on('pullingUp',()=>{
      this.$emit('loadMore')
    })
  }
};

你可能感兴趣的:(使用Better-Scroll遇到的坑)