路漫漫其修遠(yuǎn)兮，吾將上下而求索。
不禁感嘆移動(dòng)端的h5兼容真心是一門藝術(shù)~~
1. ios中設(shè)置input 的type = number 限制只能輸入數(shù)字無效，安卓有效
解決方法： <input type="number" pattern="[0-9]*">
2. ios 中select標(biāo)簽設(shè)置text-align:right；text-align-last:right無效,安卓有效
解決方法：
<select v-model.trim="formData.deadline">
<option value="12個(gè)月">12個(gè)月</option>
<option value="24個(gè)月">24個(gè)月</option>
<option value="36個(gè)月">36個(gè)月</option>
</select>
<style>
select:{
direction:rtl
}
option{
direction:ltr
}
</style>
實(shí)現(xiàn)效果：
效果圖
不過，當(dāng)選項(xiàng)過多產(chǎn)生滾動(dòng)條的時(shí)候，該方法并不友好，會(huì)有滾動(dòng)條位置遮蓋選項(xiàng)的問題：
效果圖
最終解決方法：
<div class="select_wrap">
<span class="show_op">{{formData.deadline || '請(qǐng)選擇'}}</span>
<select v-model.trim="formData.deadline" @change="changeSelect">
<option value="12個(gè)月">12個(gè)月</option>
<option value="24個(gè)月">24個(gè)月</option>
<option value="36個(gè)月">36個(gè)月</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>
實(shí)現(xiàn)原理：
用span元素展示選中結(jié)果，將select設(shè)置成透明并覆蓋在span冤死上面
默認(rèn)展示‘請(qǐng)選擇’的hint，字體顏色為較淺，監(jiān)聽select的change事件，修改展示的字體顏色
默認(rèn)效果
選中后
3.在ios客戶端打開的h5頁面如果沒有encode，那么如果鏈接中存在中文或者‘@、+’等特殊符號(hào)會(huì)遇到如下問題：
修改新的A頁面（未encode的頁面）-> B頁面 ->按返回鍵回退到修改前的A頁面
原因：
首先要清楚，ios按下回退鍵：
- 默認(rèn)會(huì)將返回的鏈接encode
- 且優(yōu)先從緩存讀取，無緩存或緩存過期才會(huì)刷新頁面
- 因?yàn)榫彺媸菍㈨撁骀溄幼鳛殛P(guān)鍵字key的，所以encode和未encoded的鏈接取到的是2份不一樣的緩存
- 結(jié)果造成每次修改A頁面，但是回退回來的時(shí)候總是舊版本，不是最新修改后的A頁面
所以客戶端的鏈接參數(shù)務(wù)必要encode,不然會(huì)帶來不必要的麻煩
