前端 Web端 开发中的坑

移动端总结

通用

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

<input id="phone" @blur="backToTop">

backToTop() {
  // 适配部分机型键盘收起时页面不回弹
  var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
  
  window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}

禁止input框和textarea编辑

1. 使用readonly或 disabled
2. 第一种方法：

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

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

4. 第二种方法：

 <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,用到此方法的好处是：当输入框被禁止以后有灰色的背景色
根据项目的需求，不同的需求所用的方法不同

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

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

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

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

Vue

禁止滑动

给最外层加上

@touchmove.prevent.stop