分享最實用的技術(shù),創(chuàng)造更大的價值

微信小程序開發(fā)自定義頭部bar后,input軟鍵盤彈起時頁面整體上移

微信小程序開發(fā)自定義頭部bar后input軟鍵盤彈起時頁面整體上移解決方法


經(jīng)過創(chuàng)軟小程序開發(fā)團(tuán)隊的檢查測試,發(fā)現(xiàn)在微信小程序textarea的屬性上增加: cursor-spacing 屬性即可,如:

<textarea  cursor-spacing='10' maxlength="-1" ></textarea>



網(wǎng)上找的其它文章,解決小程序鍵盤彈出遮擋頂部bar有一下方法做參考:


1,設(shè)置adjust-position屬性(詳細(xì)參見小程序官方文檔)

<input value="{{value}}" bindinput="bindinput" confirm-type="send" adjust-position="{{inputUp}}" bindfocus="inputFocus" bindblur="inputBlur"></input>


2,通過以上設(shè)置,鍵盤彈出時整體頁面不上移,接下來就需要獲取到軟鍵盤的高度,為頁面添加padding-bottom即可


小程序中獲取鍵盤高度代碼

inputFocus(e) {
    console.log(e,'鍵盤彈起')
    var inputHeight = 0
    if (e.detail.height) {
      inputHeight = e.detail.height
    }
},
inputBlur() {
    console.log('鍵盤收起')
},



請注意:在小程序開發(fā)編輯器中e.detail中只有value,沒有height,真機(jī)上才有


聯(lián)系
QQ
電話
咨詢電話:189-8199-7898
TOP