Vue实现移动端开屏广告+滑动登录

  • Vue实现了移动端开屏广告+滑动登录

  • 2020-03-16
  • 颓废了一天,今天做一个移动端的小Demo,因为脚手架占的空间比较大,就使用引入cdn的方式了,方便快捷一点。先上效果图
  • 源码在https://gitee.com/jimmyxuexue/vue_cdn_demo/tree/master/%E5%BC%80%E5%B1%8F%E5%B9%BF%E5%91%8A
  • Vue实现移动端开屏广告+滑动登录_第1张图片
  • Vue实现移动端开屏广告+滑动登录_第2张图片
  • Vue实现移动端开屏广告+滑动登录_第3张图片
  • 这个就是这个小Demo,我想表达的是Demo虽小,五脏俱全,很多知识点之前以为懂了,现在才知道都不懂,之前用原生JS做过pc端的滑动登录,现在用Vue.js做移动端的以为很简单,才发现事情没有想象的那么简单,移动端的滑动事件和pc端的事件并不是同一个事件,以至于我一直没有做成功
  • CSS知识点:
  • Dom.offsetWidth之的是原生自身的宽度,是包含边框的 但是不包含边距
  • user-select: none; 是让文本不能够被选中
  • CSS没有啥太大的知识点,只要花时间都能够写出来,就是一个有时候我们想让伪类元素像::before这种伪元素居中我们可以给伪元素的宿主元素设置弹性布局
  • Vue.js部分:
  • mounted生命周期函数和created生命周期函数的区别,mounted表示的是页面已经渲染好了 created表示的是页面还没有渲染好,这两个经常使用
  • 开屏广告部分时间在跳转就使用setInterval()而没有使用setTimerOut了,因为前者可以一直使用反复的执行,而后者需要不断的调用,更加的不方便。
  • 在Vue中我们如果想要修改一些元素的样式,可以使用ref引用的方式,这个就是虚拟Dom,因为Vue就是不愿意让我们使用dom元素,所以我们可以给元素设置ref属性,在JS里面再使用this.$refs.ref名来获取到这个元素,惊醒一系列你想要做的操作
  • 移动端滑动登录
  • 在PC端中我们是使用onmousemove onmousedowm onmouseup来实现拖动,因为移动端时没有鼠标的,所以含有mouse的事件都不能使用,相对应的也就改成了touchstar touchmove touchup
  • 因为Vue中有data属性记录值,所以我们可以多多的使用falg这种值来判断是否成功,像v-if来绑定这些flag,就可以实现满足某些内容再惊醒页面内容的更替。
  • 在这里插入图片描述
  • 数学问题:什么时候时拖动到重点:拖动的距离(滑块移动的距离)= 容器宽度-滑块的宽度。换成代码就是movex > (this. r e f s . f a t h e r . o f f s e t W i d t h − t h i s . refs.father.offsetWidth - this. refs.father.offsetWidththis.refs.boxs.offsetWidth
  • ruguo要取消某个绑定的事件我们不方便直接取消 就可以使用flag的方式间接的取消 只有当flag为true’的时候可以使用这个功能 这样就能完美的解决
  • Vue实现移动端开屏广告+滑动登录_第4张图片Vue实现移动端开屏广告+滑动登录_第5张图片
  • Vue实现移动端开屏广告+滑动登录_第6张图片
  • 完结撒花~~~~

你可能感兴趣的:(vue)