Bug记录
1、 使用this.$router.push
或this.$router.repalce
指令时报错“NavigationDuplicat: Avoided redundant navigation to current location”。
解决方法:vue-router版本问题
2、 在created生命周期中不能调用组件,需要在mounted中调用。
3、 better-scroll 滚动时加载新的商品数据后无法向下拉动,因为图片是异步加载,当图片还没加载完成时,better-scrool就已经计算好了可滚动的区域,这个高度是不包含图片的,值会小于正常有图片的高度值,所以会出现商品滚动到一定程度无法滚动的情况。
解决方法:监听每一张图片是否加载完成,只要有一张图片加载完成就执行refresh(),刷新更新可滚动区域(优化,采用防抖函数,见5)。
如何监听图片是否加载完成?
通过给GoodsList的img绑定 @load ,在mounted生命周期监听图片加载,并将事件发送到事件总线(this.$bus.$emit
、this.$bus.$on
),在main.js中通过vue实例建立事件总线。
GoodsList.vue
<template>
<div class='goods'>
<!-- @load监听图片加载 -->
<img :src="item.show.img" alt="" @load='imgLoad'>
</div>
</template>
<script>
export default {
name: 'GoodsList',
methods: {
imgLoad() {
//可以通过vuex,在这里改变vuex中的一个属性,表示图片加载完成$store
//也可以通过事件总线$bus
this.$bus.$emit('itemImageLoad')
}
}
}
</script>
main.js
//用Vue实例作为事件总线
Vue.prototype.$bus = new Vue();
Home.vue
export default {