解決ios嵌入h5頁面中的bug---記錄

問題一: ios中input的兼容性問題

問題描述:使用了vux的search組件,在網頁顯示正常,在ios系統中打開搜索框會變高,並且輸入文字,不會顯示文字,但是點擊搜索會將正確的結果顯示出來(可能是由於line-height引起的,給 input 添加一個 line-height:normal屬性解決)。

解決:光標聚焦導致變高,具體原因還沒找到,所以手寫了一個搜索框,具體代碼如下。一個原生的input標籤,用帶action屬性的form標籤包裹起來,使手機鍵盤迴車按鈕提示顯示爲“搜索”。

<form action="javascript:;" class="searchForm" id="searchForm">
    <label>
        <icon type="search"></icon>
    </label>
    <!-- autocomplete="off" 該屬性設置將默認的下拉框顯示搜索歷史記錄去掉; -->
    <input type="search" @keyup.enter="getResult" @input="getResult" autocomplete="off" class="inputSearch" v-model="value" :results="results" placeholder="請輸入景區名稱">
</form>

問題二:line-height不能居中顯示

解決:使用flex佈局中的align-items:center垂直居中,或者position+transform/負的margin。也可以將line-height設爲normal,再使用padding垂直居中對齊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章