vue在开发移动端中遇到的坑(一)

1css3方面

  在做css3动画的时候,比如transition: height 0.3s, 用chrome浏览器调试的时候 动画很流畅完成没有问题。到了真机调试的时候问题出来了 动画卡顿看着很难受。在查阅资料之后发现这是个小坑。动画的时候尽量不要用margin,padding,height,width,最好用transform去动画效果。

还有个小问题就是如果元素本来是隐藏的,然后变显示了,这时后直接执行动画是无效的,需要加个小延时之后在执行动画。

例如:

  .show {

    transform:rotate(7deg);

  }

   <div v-if="flag" style="transition: all 0.3s;"  :class="{show: show}">hello </div>

  data () {

    retrun: {

       flag: false,

       show: false

    }

  }

  this.flag = true

  setTimeout( ()=>{

    this.show = true

  },20)

pattern

  这是最近在改input手机输入格式的时候,发现的一个很好用的属性,pattern 属性规定用于验证输入字段的模式。

例如:<input type="phone" pattern="\d" />

这样做在移动端有两个好处

1.可以直接调起安卓手机和ios手机上的九宫格数字键盘(我们的产品经理非要这个需求,不管安卓还是ios输入手机号码的时候必须调起数字键盘,还好发现了pattern这个属性,折磨人啊)

2.之前都是用watch去监听input输入的内容,如果不是数字就用正则替换点,很麻烦。有了它就很方便了,上面直接写正则就好了,用户只能输入符合正则的内容。

先记录这两个坑,和大家分享下,我还是一个博客小白,我是小文,希望大家一起分享经验,加油

猜你喜欢

转载自www.cnblogs.com/xiaowen0902/p/9610976.html
今日推荐