盒子
盒子
文章目录
  1. scrollTop的兼容性问题
    1. 事件戳的转化问题
    2. URL里的token分析
    3. i18n在vue中的使用

工作小结-1

scrollTop的兼容性问题

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

  • 仅仅使用document.body.scrollTop来进行滑动距离的判断,会失效
1
2
3
4
5
6
7
if (document.body.scrollTop > 100) {
console.log('滑动距离大于100像素');
this.isShow = true
} else {
console.log('滑动距离小于100像素');
this.isShow = false
}

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

1
2
3
4
5
6
7
8
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文件中,相当于一个字典。

使用

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