mpvue 小程序input輸入框鍵盤彈出使得布局上移問題

問題顯示如圖

 

備注展示提示一直在鍵盤上面，根據多次點擊得出規律，跟你滾動的高度有關系；

解決思路，

在input加一個失去焦點事件，對input做處理

 

 

 

 

 

 

 

 在頁面父級需要加滾動事件，判斷樣式顯示；

<div class="base_warp" 
      @scroll ='scroll'
      scroll-y='true'>
    <div
      class="base_warp_con"  
      :class="flag_position==1?'pro_position':''" 
      :style="position_margin_top"
    >
    </div>
</div>

 

 <input type="text" v-model="paramsOrder.companyProductList[index].remark" placeholder="選填，給商家留言" class="remark" @click="set_position" @blur="blur_position">

　　

js部分

 

 

 

 

export default {
  data () {
    return {
      flag_position:0,//判斷是否操作父級的定位操作
      position_margin_top:0,//點擊input獲取距離頂部高度
      position_margin_top_cur:0,//點擊input獲取距離頂部高度--暫時存取
    }
  },
   methods: {
    //滾動事件獲取滾動的高度，為失去焦點，恢復獲取原先點擊的高度，做准備
        scroll(e){
          console.log('開始滾動')
          console.log(e)
          this.position_margin_top_cur = e.mp.detail.scrollTop;
        },
     //失去焦點，恢復獲取原先點擊的高度
        blur_position(){this.position_margin_top = 'marginTop:'+this.position_margin_top_cur+'px';
        },
    }
   

console.log(e) ---

e.mp.detail.scrollTop

 

 

 

 最終正常顯示