今天第一次使用better-scroll,折腾了两个小时,滚动效果始终不行。
先上官网地址:https://github.com/ustbhuangyi/better-scroll
一,滚动失效原因
1,先确认安装了better-scroll,并且成功引入:
确认安装:
引入:值得注意的是官网中这个“BScroll”前两个字母是大写的,后续要统一,很多文章中的代码只有B是大写。
import BScroll from '@better-scroll/core'
2,保证滚动的html结构正确
官网的结构是:
也就是说better-scroll它只给第一个标签(就是class="content"那个ul)添加滚动效果,所以滚动的内容统统都要放置在这里面
3,保证wrapper的高度小于content的高度
这里要说明它滚动的原理,就需要悄咪咪地盗用一下这张图:
绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。
审查元素看高度也好,打印scroll对象查看高度信息也可以:
mounted() {
this.scroll = new BScroll(this.$refs.wrapper, {})
console.log(this.scroll)
}
1256>600,这个条件是满足的
4,wrapper需要设置一些特定的样式
position: absolute;
left: 0;
top: 0;
overflow: hidden;
最主要的就是overflow hidden!
5,可以查看content的样式,这个插件的样式毕竟是添加在它身上的。
我的没出现!!心好痛,然后我鼠标滚轮怎么滚都不行。这是一个悲伤的故事!!待会说~~
6,滚动失效还有一种原因,就是添加滚动样式的时机不对
正确的时机应该是等页面的元素都渲染完毕之后。
所以需要放置在vue的生命周期函数之中。
但是有些时候还不行,那就把它整成异步,放在setTimeout里面。
setTimeout(()=>{
this.scroll = new BScroll(this.$refs.wrapper, {})
},20)
当然,整成异步,vue提供了一个方法:Vue.$nextTick()
<script>
import BScroll from '@better-scroll/core'
export default{
mounted() {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper, {})
})
}
}
</script>
在排查了近两个小时之后,我快绝望了。为啥我还是滚动不了。正当我痛哭流涕以头抢地之时,不再使用滚轮滚动,而是长按鼠标滑动时!居然居然!居然阔以惹!!!
原来我写的都是对的!!
只是better-scroll插件使用之后,默认移动端是鼠标按住不放才能滑动!而不是用鼠标滚轮滚动!!
这特么!!!????
然后content的样式也是在滑动之后才出现:
我没有哭!!!!
二,页面刷新之后,滚动又失效。修改代码保存时的自动刷新却有效
这个明显是因为创建better的时机不对。创建better的时机一定要在异步请求都完成以后,页面渲染完毕了,才进行对better-scroll的初始化.如果不这样做的话,better-scroll无法正确取到content的高度.从而无法实现滚动.
那何时才是页面渲染完毕呢?
我用的vue结合vuex,刚开始我在vue的生命周期函数mounted里面定义了创建better-scroll的命令。就发生了标题的问题,一刷新浏览器就失效。
所以我就想,会不会是mounted说的渲染结束,是不是仅仅是本页面的数据渲染完毕,而vuex中传过来的数据还没有被渲染,导致的content高度不足导致的失效。
于是我写了这段代码:
然后刷新页面:
这下问题就明了,在mounted的函数中,content的高度下明显会失效。接下来,只要把创建better-scroll放在updated中就行了