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框将页面往上推动的机制;
如果各位看官有什么不懂的可以私聊我