----uni-app之解決底部按鈕絕對定位后被軟鍵盤推起的bug----


移動端h5頁面經常會遇到軟鍵盤頂起底部fixed定位元素,體驗不好。記錄下uni-app下同樣的問題是如何解決的。

解決思路:獲取窗口尺寸,監聽窗口尺寸變化,比較變化后窗口的尺寸和實際窗口尺寸的大小做相應處理。直接上代碼:
<!--html-->
<input  type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/>

<view v-if="tabbar">底部懸浮</view>


data(){
        return{
            tabbar: true,
            windowHeight: ''
    }
},
onLoad() {
    uni.getSystemInfo({
        success: (res)=> {
            this.windowHeight = res.windowHeight;
        }
    });    
    uni.onWindowResize((res) => {
        if(res.size.windowHeight < this.windowHeight){
            this.tabbar = false
        }else{
            this.tabbar = true
        }
    })
},
methosd:{
    showTabbar(){
        this.tabbar = true;
    },
    hideTabbar(){
        this.tabbar = false;
    }
}

@click和@blur 分別解決安卓和ios 兼容問題
---------------------------------------------------------------------------------------------------------

ps:可以利用彈性布局,中間flex為1,底部按鈕固定高度。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM