路漫漫其修远兮，吾将上下而求索。
不禁感叹移动端的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按下回退键：
- 默认会将返回的链接encode
- 且优先从缓存读取，无缓存或缓存过期才会刷新页面
- 因为缓存是将页面链接作为关键字key的，所以encode和未encoded的链接取到的是2份不一样的缓存
- 结果造成每次修改A页面，但是回退回来的时候总是旧版本，不是最新修改后的A页面
所以客户端的链接参数务必要encode,不然会带来不必要的麻烦
