扫描小程序码分享
类似客服,输入框组件,把输入框推到输入键盘顶部效果怎么写样式
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
// js Page({ data: { inputBottom: 0 }, onLoad: function () {}, onReady() { // 监听键盘高度变化 wx.onKeyboardHeightChange(res => { console.log(res.height) this.setData({ inputBottom: res.height }) }) } }) // wxml <view class="input-area" style="bottom:{{inputBottom}}px"> <input class="input" adjust-position="{{false}}" /> <view class="btn-send">发送</view> </view> // wxss view { box-sizing: border-box; } .input-area { position: fixed; bottom: 0; left: 0; display: flex; align-items: center; height: 100rpx; box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.25); width: 750rpx; padding: 0 20rpx; transition: all 0.35s; } .input { border: 1px solid #7508DD; height: 70rpx; border-radius: 10rpx; flex: 1; } .btn-send{ width: 120rpx; height: 70rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #fff; background:linear-gradient(165deg,rgba(255,49,37,1) 0%,rgba(117,8,221,1) 100%); border-radius: 10rpx; margin-left: 20rpx; } https://developers.weixin.qq.com/s/P0qJEumW7Hia
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
可以在输入框获取焦点的时候拿到键盘弹出的高度,再给输入框定位距离底部的距离是输入法的高度就可以了
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
// js Page({ data: { inputBottom: 0 }, onLoad: function () {}, onReady() { // 监听键盘高度变化 wx.onKeyboardHeightChange(res => { console.log(res.height) this.setData({ inputBottom: res.height }) }) } }) // wxml <view class="input-area" style="bottom:{{inputBottom}}px"> <input class="input" adjust-position="{{false}}" /> <view class="btn-send">发送</view> </view> // wxss view { box-sizing: border-box; } .input-area { position: fixed; bottom: 0; left: 0; display: flex; align-items: center; height: 100rpx; box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.25); width: 750rpx; padding: 0 20rpx; transition: all 0.35s; } .input { border: 1px solid #7508DD; height: 70rpx; border-radius: 10rpx; flex: 1; } .btn-send{ width: 120rpx; height: 70rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #fff; background:linear-gradient(165deg,rgba(255,49,37,1) 0%,rgba(117,8,221,1) 100%); border-radius: 10rpx; margin-left: 20rpx; } https://developers.weixin.qq.com/s/P0qJEumW7Hia可以在输入框获取焦点的时候拿到键盘弹出的高度,再给输入框定位距离底部的距离是输入法的高度就可以了