小程序键盘弹出页面不上推笔记

最新推荐文章于 2024-04-19 17:23:09 发布

yzp0112

最新推荐文章于 2024-04-19 17:23:09 发布

阅读量523

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/yzp0112/article/details/112306001

版权

属性	类型	默认值	必填	说明
adjust-position	boolean	true	否	键盘弹起时，是否自动上推页面
cursor-spacing	number	0	否	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
bindfocus	eventhandle		是	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持

<view class="footer-input flex flex-btw" style="bottom:{{bottomHeight}}px;">
	<view class="input-box box-s">
		<input class="reply-content" adjust-position="{{false}}" placeholder="期待您的精彩评论" bindfocus="toggleFocus" bindblur="toggleFocus" cursor-spacing="20rpx" type="text" value="{{replyContent}}" />
	</view>
	<view class="re-btn color-fff fts-14 ftw-b">发布</view>
</view>

data:{
	bottomHeight:0,//input距离底部的距离
},
toggleFocus(e){
	this.setData({
		bottomHeight:e&&e.detail.height?e.detail.height:0
	})
},

.footer-input{
	padding: 0 40rpx 0 30rpx;
	height: 112rpx;
	background: #FFFFFF;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
}
.footer-input .input-box{
	width: 500rpx;
	height: 72rpx;
	background: #F5F5F5;
	border: 1px solid #DBDBDB;
	border-radius: 36rpx;
	padding:0 20rpx;
}
.footer-input .input-box .reply-content{
	width: 100%;
	height: 100%;
}
.footer-input .re-btn{
	width: 156rpx;
	height: 72rpx;
	border-radius: 36rpx;
	text-align: center;
	line-height: 72rpx;
}