处理微信小程序input框将页面往上推动

本文主要是介绍处理微信小程序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框将页面往上推动的机制；
如果各位看官有什么不懂的可以私聊我

这篇关于处理微信小程序input框将页面往上推动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！