小程序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框的数据
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
}
})
},
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。