工作小结-1

scrollTop的兼容性问题

在做移动端布局时，监控touchmove事件经常会使用scrollTop来模拟页面的滑动距离，但是

• 仅仅使用document.body.scrollTop来进行滑动距离的判断，会失效

if (document.body.scrollTop > 100) {
    console.log('滑动距离大于100像素');
    this.isShow = true
} else {
    console.log('滑动距离小于100像素');
    this.isShow = false
}

此时应该考虑兼容性，不应该去监听body的滚动距离，而应该去监听html元素的滚动距离

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if (scrollTop > 100) {
    console.log('滑动距离大于100像素');
    this.isShow = true
} else {
    console.log('滑动距离小于100像素');
    this.isShow = false
}

上图才是正确的结果，当滚动距离大于100像素时，出现回到顶部的按钮。

事件戳的转化问题

URL里的token分析

为了web安全考虑一般在路径里面后端会传入一个token来标识用户，防止反复攻击，例如http://10.20.20.109/?nuctoken=111#/，只有带有nuctoken才会访问到正确的页面，如果没有就会显示errorpage

i18n在vue中的使用

为了扩展字符的国际化语言，使用i18n，在vue中单独把汉字字端放到一个cn.js文件中，相当于一个字典。

使用

$t('字典中某个字段的名字')