因为获取图片时滚动条已经加载完成,无法得到真正滚动条长度而出现了错误
解决方法:
Recommend
因为Scroll 组件是在 Home父页面中,故recommend组件在完成数据获取后要把状况告诉父组件,故使用了子传父 故使用了 自定义事件进行传递
recommend
//异步获取完成后使用 this.$emit自定义事件进行传递
getHomeRecommend(this.curPage).then(data=>{
if(data){
console.log(data);
this.curPage++;
this.totalPage = data.totalPage;
this.recommends = data.itemList.concat(data.itemList);
this.$emit('loaded',this.recommends);
}
});
Home页面
<home-recommend @loaded="getRecommends"></home-recommend> 触发自定义事件
获取由 recommend传递过来的 recommends变量 并 传递给 scroll组件进行数据更新
<com-scroll :data="recommends"> 通过 prop传给 滚动条组件
ComScroll
1. 在滚动条组件中加入data prop 来接受图片已经加载完成的状态
props:{
scrollbar:{
type:Boolean,
default:true
},
data:{
type:[Array,Object]
}
},
在这里插入代码片
2. 使用watch观察 data的变化 若发生变化 使用 vue-awesome-swiper的 update()方法进行滚动条的更新