移动端总结

通用

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

<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编辑

使用readonly或 disabled第一种方法： <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,用到此方法的好处是：当输入框被禁止以后没有灰色的背景色

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

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

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

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

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

Vue

禁止滑动

给最外层加上

@touchmove.prevent.stop