小程序uni-app處理input框將頁面往上推動的解決辦法

1. view

<view class="bottom-wri-box" :style="{bottom: bottomHeight}">
	<image @tap="changeChander" class="left-cont-icon" :src="imageUrl+'/huifu-icon.png'"></image>
	<input  
	:adjust-position="flasFlag"
	@confirm="AddSendMess"
	class="mormal-input uni-input"
	maxlength="300"
	@focus="getheightCont"
	@blur="initheight"
	confirm-type="send"
	placeholder="說點什么" 
	v-model="writeCont" />
</view>

2. data中的值，用於控制input輸入框的位置；

flasFlag:false, //表示input輸入時，頁面不會往上推動
bottomHeight:'0rpx',//input框的數據

3.mthods中的方法動態控制input框中的位置

methods:{
  getheightCont(e){
    //e.detail.height 用戶獲取鍵盤的高度，由於機型的不同，所以可以加上一個值10或者20
    this.bottomHeight=(e.detail.height*2)+10+"rpx";//你可以加上20或者加上10
  },
  initheight(){ 
     this.bottomHeight='0rpx'
  },
}

4.css

.bottom-wri-box{
   width:100%;
   background-color:#fff;
   position:fixed !important; //一定要固定定位哈
		
   height: 152rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000 !important;
   box-shadow: 0px -2px 20px 0px rgba(0,0,0,0.05); 
   .mormal-input{
      width: 604rpx;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 44rpx;
      padding-left: 34rpx;
      box-sizing: border-box;
      padding-right: 32rpx;
       //注意input框中內容太多可能會出現樣式移溢出
      white-space:normal !important; 
      word-break:break-all !important; 

      margin-left:28rpx;
}
  // 左側圖標 右側表情
  .left-cont-icon{
       width: 54rpx;
       height: 54rpx;
   }
}

我們在輸入的時候，發現頁面並沒有往上推動；
這樣我們就完美的解決了input框將頁面往上推動的機制；