zoukankan      html  css  js  c++  java
  • H5端常见问题

    1.弹窗数字键盘

     <!-- 有'#','*'符号的键盘 -->
      <input type="tel"/>
      <!-- 纯数字的键盘(使用正则pattern) -->
      <input pattern="d*"/>

    2.打开原生应用

    <a href="weixin://">打开微信</a>
    <a href="alipays://platformapi/startapp?saId=10000007">打开支付宝</a>

    这种方式叫做URL Scheme,是一种协议,一般用来访问APP或者APP的某个页面、功能

    协议格式:

    scheme://[path][?query]

    3.忽略自动识别

    有些浏览器会自动识别账号为手机号或者邮箱,例如<p>15018888888</p>

    可以在meta标签添加属性避免这种情况

    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />

    4.解决input失去焦点后页面没有回弹

    一般出现在IOS设备中的微信内部浏览器,出现的条件为页面高度过小,聚焦时页面需要往上移动

    解决方案:

    <template>
      <input type="text" v-model="inputData" @focus="focus" @blur="blur" />
    </template>
    <script>
    export default {
      data() {
        return {
          inputData: '',
          scrollTop: 0
        }
      },
      methods: {
        focus() {
          this.scrollTop = document.scrollingElement.scrollTop
        },
        blur() {
          document.scrollingElement.scrollTo(0, this.scrollTop)
        }
      }
    }
    </script>

    5. 滑动不流畅

    一般出现在ios设备中,自定义盒子使用了overflow:auto || scroll后出现的情况

    优化代码

    div {
      -webkit-overflow-scrolling: touch;
    }

    https://juejin.im/post/5d6e1899e51d453b1e478b29

  • 相关阅读:
    try和catch
    获取地址栏参数(E积分项目)
    正则验证,只能输入数字,每四位隔一个空格。
    E积分项目总结(绑卡页 第一步)
    本地存储localStorage用法详解
    python os 模块介绍
    生成器迭代器
    python 魔法方法
    匿名函数
    python自定义函数和内置函数
  • 原文地址:https://www.cnblogs.com/wangxirui/p/11653283.html
Copyright © 2011-2022 走看看