小程序uni-app处理input框将页面往上推动的解决办法

1. view

<view class="bottom-wri-box" :style="{bottom: bottomHeight}">
	<image @tap="changeChander" class="left-cont-icon" :src="data: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框的数据
keywordHeight:'0rpx',

3.mthods中的方法动态控制input框中的位置

methods:{
  getheightCont(e){
    // input 展示的位置
    this.bottomHeight=(e.detail.height)+"px";
    this.keywordHeight=(e.detail.height)+"px";
  },
  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框将页面往上推动的机制；

在app上可能出现的问题

由于我们的小程序有些时候会打包成为app.
在app上会出现的问题。
点击输入法右侧的 ^符号。输入法会自动隐藏。
这样就回导致input展示的位置不正确
处理办法是：使用onKeyboardHeightChange进行监听键盘的高度。
当键盘判断小于10,说明键盘被隐藏了！

详细的代码

// 处理app软键盘
onReady() {
  // 监听键盘高度变化，处理用户点击输入法中的^,input框位置显示有问题
  uni.onKeyboardHeightChange(res => {
	if(res.height < 10){
	    this.bottomHeight='0rpx'
	}else{
            //这里就不要带单位了，因为加上单位视觉上会有一点缓慢向上推的过程
	    this.bottomHeight=this.keywordHeight
	}
  })
},