发表于： 2019-10-25 21:34:30
1 881
今天完成的事情：
1 下拉刷新
2 断网提示
3 代码优化
明天计划的事情：
1 优化代码，使用webpack引入插件，把px转换成rem
遇到的问题：
1 组件内没有引入插件，但是也能使用
就是上图中vant的这个标签，因为是按需引入，所以我一般都是在当前的组件引入的。之后就是我在component中并没有引入，但是它也能使用。后面检查了一遍，发现是因为队友在main.js中引入的。
2 设置了beforeRouteLeave()，发现路由不能跳转了。
报错
去查了下，发现是因为我没有设置next()的原因，在函数内加上这个参数，并设置上，就可以了
收获：
1 断网检测
window.addEventListener('online', function(){
// 网络由异常到正常时触发
});
window.addEventListener('offline', function(){
// 网络由正常常到异常时触发
});
在vue中实现思路如下：
data中初始化在线状态。
data(){
return{
onLine: navigator.onLine,
}
}
mounted中监听事件。
mounted(){
window.addEventListener('online', this.updateOnlineStatus);
window.addEventListener('offline', this.updateOnlineStatus);
}
方法中改变onLine值。
methods:{
updateOnlineStatus(e) {
const { type } = e;
this.onLine = type === 'online';
},
}
4.最后 最好在销毁时解除事件监听。
beforeDestroy(){
window.removeEventListener('online', this.updateOnlineStatus);
window.removeEventListener('offline', this.updateOnlineStatus);
},
返回列表
评论