Vue项目使用BetterScroll框架使用时遇到的问题

当页面中存在图片的加载功能时，会存在允许拖动区域小于可视距离的问题。

 

在使用betterscroll时，其允许滚动的区域大小是根据scrollheight属性决定的，而其一开始计算的高度是不包括实际的图片的大小的。这就会导致图片会将页面撑大，问题就出现了。

 

解决：在Vue中监听图片的加载完毕事件@load，emit传出事件给使用了scroll的地方

此处会涉及父子兄弟等关系组件的传值问题，可以解决的相关知识点有

1、VueX全局状态管理

2、事件总线bus

事件总线实际上不是一个Vue自带的对象，如果打印它会显示undefined。

而是在Vue的全局中(原型链)自行添加该对象Vue.prototype.$bus = new Vue();

至于为什么要是一个Vue实例，想想就懂了。

 

图片组件发出事件this.$bus.emit('event')

控制滑动scroll的组件监听this.$bus.on('event',function() {})

回调方法中调用scroll的refresh方法就可以了