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

文章作者: 吴少林
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 吴少林 !
 上一篇
最强的团队 最强的团队
所在的团队入职已经有一个半月了,目前的团队氛围对于我这个新人来说,就一句话如鱼得水,感谢机缘,能让我在转行的第一份工作中遇见这个团队,而我也会为了这个团队努力工作,让前端的大旗迎风飞扬。 团队组成由4个java后端、1个Python后端、3
2018-08-31
下一篇 
Vue的组件间通信 Vue的组件间通信
组件是插槽式的,例如某个页面有两个组件,其中搜索作为其中一个组件,当它作为组件的时候,它作为子组件的时候需要把参数通过属性的方式传递进来,通知父组件的时候通过触发事件来进行通信。 以上是组件化的简单描述,与模块化的组要区别在于组件化课深度定
2018-05-07
  目录