vue.js学习之better-scroll封装的轮播图初始化失败

vue.js学习之better-scroll封装的轮播图初始化失败

问题一：slider组件初始化失败

原因：页面异步获取数据很慢，导致slider初始化之后，数据还未获取到，导致图片还未加载

解决方法：

在slider组件中监听页面传过来的图片数据，如果图片更新了，再次出发页面slider的初始化

1：首先在slider.vue的prop中注册一个变量

imgData: {
        type: Array,
        default: null
}

2：监听

watch: {
      imgData() {
        setTimeout(() => {
          this._setSliderWidth()
          this._initDots()
          this._initSlider()
        }, 20)
      }
    }

3：父组件中传数据到imgData中

<slider :imgData="recommends">

 

　　

 

转载于:https://www.cnblogs.com/momozjm/p/8081718.html