通用

适配部分机型键盘收起时页面不回弹

  1. <input id="phone" @blur="backToTop">
  1. backToTop() {
  2.   // 适配部分机型键盘收起时页面不回弹
  3.   var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
  5.   window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  6. }

禁止input框和textarea编辑

  1. 使用readonly或 disabled
  2. 第一种方法：
  1. <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%" readonly>
  2. <textarea v-model="ConList.configuration.description" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" readonly></textarea>

重点：我们使用readonly,用到此方法的好处是：当输入框被禁止以后没有灰色的背景色

  1. 第二种方法：

    <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%" disabled>
<textarea v-model="ConList.configuration.description" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" disabled></textarea>

    重点：我们使用disabled,用到此方法的好处是：当输入框被禁止以后有灰色的背景色
    根据项目的需求，不同的需求所用的方法不同

  2. 拓展：

    1. 禁止文本域拖动： resize: none
    2. 禁止有滚动条： overflow: hidden

html页面在safari浏览器中滑动不流畅问题

给有滚动条的元素添加： -webkit-overflow-scrolling:touch;

main {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

软键盘弹起和底部按钮

软键盘弹起，按钮消失

computed:{
  bottomShow() {
        return !(this.screenHeight > (this.clientHeight + 90));
  }
}

transform:rotate()在ios上不生效的坑

在父元素设置perspective，如下

.father {
    perspective:1000; // 在这里添加
    .childeren {
        transform: rotateY(180deg);
    }
}

perspective

perspective

Vue

禁止滑动

给最外层加上

@touchmove.prevent.stop