android->按鈕底部定位上移

寫在前面：之前的本身，能夠專心致志的作事情，如今的本身，每次投入學習就像熱鍋上的螞蟻，沸騰着。改變狀態，從一個小博客開始。

前面一節講了ios遇到的坑，本週本身又一次遇到了安卓的坑 

原生和vue上的解決方式

1.安卓坑之軟鍵盤彈起來 就不是你的背景圖了哦～

 實現的功能爲一個表單，以下圖所示 ，

表單的白色框是填充整個的內部的，就是手機屏幕無論多大，白色的框都必須給我撐開//父盒子

.bank-list-form { min-height: 100%; height: 100%; width: 750/@rem; background: url("xxx.png") ; background-size: 750/@rem cover; 
//子盒子
 .bank-wrapper { width: 690/@rem; min-height: 100%; //和父盒子高度保持一致 且撐滿整個屏幕
 }
 }

 

坑點1: 整個頁面的背景是一個圖片，當軟鍵盤彈起來時，背景圖會被壓縮變形，效果圖就不展現了，更改以此方式，設置背景圖的一個背景高度

       舒適提示1:對於這種大圖片做爲背景，必定要no-repeat 否則 會有大屏的手機下面的部分顯示白邊

background-size: 750/@rem cover; 

cover 覆蓋整個頁面高度 而設置寬度只要是爲了防止頁面高度變化時，向兩個拉開

坑點2：頁面按鈕絕對定位到底部時，軟鍵盤彈起來致使按鈕跟着上來
正常的寫法：

.bank-wrapper {
        width: 690/@rem;  
        min-height: 100%;
        position: relative;

        .bottom-fixed{
            position: absolute;
            bottom: 40/@rem;  
            width: 630/@rem; 
        }
}

　父元素相對定位，自元素絕對定位就能夠了，可是在安卓中，會發現，軟鍵盤彈起來，按鈕就會上去，致使頁面的樣式錯亂，在小屏幕的瀏覽器中也會出現這種狀況，

產生的緣由分析：因爲頁面內部的白色輸入框部分的高度是依賴於總體的高度，而總體的高度爲100%，致使內部的高度也爲100%，高度不夠用，底部相對定位的按鈕天然就會定位到一個和輸入框表單重疊的位置。

 

 先解決重疊的問題：按鈕始終在輸入框表單的下部分，設置白色表單框的下部分padding-bottom>按鈕的高度，這樣高度是天然夠了，在小屏幕的手機中，當即申請按鈕也不會覆蓋表單框了。

繼續相連問題，按鈕不會重疊了，可是軟鍵盤彈起來，整個頁面的height就會變小，而會致使頁面變形，

var windheight = $(window).height();  //獲取頁面變形前高度 
      $(window).resize(function(){
        var docheight = $(window).height();
        if(docheight < windheight){  
            $("body").css("height",windheight); //當軟鍵盤彈起來的時候自動設置頁面的高度爲原高度，這樣就行了
        }else{   
            $("body").css("height","100%"); //軟鍵盤落下去回到原來的高度
        }           
      });

　　在整個問題解決中，注意點有兩個：定位在底部的按鈕和背景的圖片。

 

2.vue中如何解決

 .commpn-apply { background: url("xxx") no-repeat; background-size: 100% 482px; padding-left: 30px; padding-right: 30px; height: 100vh;  box-sizing: border-box; display: flex; flex-direction: column;
  .son{
    height:100%

}    
}

 

 解決方式： 媒體查詢方法，頁面變化時，給盒子高度

@media (min-width: 320px) {
    .commpn-apply {
      min-height: 568px;
      height: 100vh;
    }
  }

  @media (min-width: 375px) {
    .commpn-apply {
      min-height: 667px;
      height: 100vh;
    }
  }