标签：box 微信 height width important 框将 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框将页面往上推动的机制；
如果各位看官有什么不懂的可以私聊我

标签：box,微信,height,width,important,框将,input,页面
来源： https://blog.csdn.net/styleforgive/article/details/115645000

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。