解决Better-Scroll在Vue内因为网络请求慢，导致无法滑动问题

原因

• Better-Scroll的实例有scrollerHeihgt属性它可以决定多少区域可以滚动
• scrollerHeight属性值时Better-Scroll里的content中的子组件的高度
• 当子组件中的图片在网络请求到地址后，渲染的时间超过scrollerHeight属性计算出值的时间
• scrollerHeight的值没有讲图片高度计算在内，就会造成页面无法滑动( 滑动过程中卡顿 )
• 后来在图片加载出来后，而scrollerHeight的值并没有进行更新

解决

• 监听每一张图片是否加载完成，每加载完成一张图片执行一次refresh()
• better-scroll实例的 refresh()方法，会重新计算scrollerHeight

方法一：利用vuex来完成**

vue组件内 在img标签内监听图片是否加载完load事件

  <img :src="item.image" alt="" @load="imageLoad">

 methods:{
    imgLoad(){
    //调用实例方法
      this.$store.state.vuexScroll.scroll.refresh();
    }
  }

vuex内

import { createStore } from 'vuex'
export default createStore({
  state:{
  //初始为null 
    vuexScroll:null
  },
  mutations:{
  //把对应的better-scroll实例传入，更改state内的vuexScroll
    updateScroll(state,value){
      state.vuexScroll=value;
    }
  },
  actions:{},
  getters:{},
  modules:{}
});

方法二：利用事件总线来完成

在vuex3.x后vue实例创建改成了createApp({})，prototype属性也被取消了，因此无法使用之前Vue.prototype.$bus = new Vue()的方式使用事务总线

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
//除了$emit触发事件之外，还应该有$on监听函数,官方推荐使用第三方库mitt
//npm install mitt --save 
import mitt from "mitt"
const app=createApp(App)
app.use(router).mount('#app')
app.config.globalProperties.$bus= new mitt()

vue组件同方法一

 <img :src="goodshow.show.img" alt="" @load="imageLoad">

methods:{
    imageLoad(){
      this.$bus.emit('imageLoad');
    }
  }

监听图片加载的组件

mounted() {
    this.$bus.on('imageLoad',() =>{
    //获取要进行刷新的scroll实例
     this.$refs.scroll.scroll.refresh();
    })
  },

引出的其他问题（可选择）

• 提高性能，每加载一张图片就监听一次，刷新一次，会导致性能下降。

解决
设置定时器，在多少毫秒内有多次图片加载完成事件传过来，只refresh()一次。

mounted() {
  function debounce(func,delay){
    let timer = null ;
    return function (...arg){
      if (timer) clearTimeout(timer);
      timer=setTimeout(function (){
      func.apply(this,arg);
      },delay)
    }
    const refresh = debounce(this.$refs.scroll.refresh,50)
    this.$bus.on('imageLoad',() =>{
      refresh()
    })
  },