当页面中存在图片的加载功能时,会存在允许拖动区域小于可视距离的问题。
在使用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方法就可以了