shaolin

悟已往之不谏,知来者之可追!

0%

工作小结-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('字典中某个字段的名字')