IOS系统踩坑2

路漫漫其修远兮，吾将上下而求索。
不禁感叹移动端的h5兼容真心是一门艺术~~

1. ios中设置input 的type = number 限制只能输入数字无效，安卓有效

解决方法： <input type="number" pattern="[0-9]*">

2. ios 中select标签设置text-align:right；text-align-last:right无效,安卓有效

解决方法：

 <select v-model.trim="formData.deadline">
     <option value="12个月">12个月</option>
     <option value="24个月">24个月</option>
     <option value="36个月">36个月</option>
   </select>
<style>
select:{
    direction:rtl
}
option{
    direction:ltr
}
</style>

实现效果：

效果图

不过，当选项过多产生滚动条的时候，该方法并不友好，会有滚动条位置遮盖选项的问题：

效果图
最终解决方法：

  <div class="select_wrap">
            <span class="show_op">{{formData.deadline || '请选择'}}</span>
            <select v-model.trim="formData.deadline" @change="changeSelect">
              <option value="12个月">12个月</option>
              <option value="24个月">24个月</option>
              <option value="36个月">36个月</option>
            </select>
 </div>
<style>
.select_wrap {
            position: relative;
        }
.show_op {
            font-size: 16px;
            color: rgba(160, 160, 160, .65);
            line-hight: 20px;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            text-align: right;
        }
select {
        line-height: .2rem;
        z-index: 1;
        position: relative;
        width: 100%;
        opacity: 0;
        filter:alpha(opacity = 0);
    }
</style>
<script>
export default {
 data () {
    return {
      formData: {
        deadline :''
     }
},
methods: {
 changeSelect: function (e) {
      e.currentTarget.previousSibling.setAttribute('style', 'color:#212121')
    }
}
</script>

实现原理：
用span元素展示选中结果，将select设置成透明并覆盖在span冤死上面
默认展示‘请选择’的hint，字体颜色为较浅，监听select的change事件，修改展示的字体颜色

默认效果 选中后

3.在ios客户端打开的h5页面如果没有encode，那么如果链接中存在中文或者‘@、+’等特殊符号会遇到如下问题：

修改新的A页面（未encode的页面）-> B页面 ->按返回键回退到修改前的A页面
原因：
首先要清楚，ios按下回退键：

1. 默认会将返回的链接encode
2. 且优先从缓存读取，无缓存或缓存过期才会刷新页面
3. 因为缓存是将页面链接作为关键字key的，所以encode和未encoded的链接取到的是2份不一样的缓存
4. 结果造成每次修改A页面，但是回退回来的时候总是旧版本，不是最新修改后的A页面

所以客户端的链接参数务必要encode,不然会带来不必要的麻烦