使用fixed定位将input固定在屏幕底部，同时为了不让页面整体上移，需要将input的adjust-position属性设为false。
只是，这么做的话会导致底部的输入框也无法上移。 从而被拉起的小键盘盖住。
从官方社区整理来一个方法，能够在小键盘拉起的同时将底部的input框顶起，同时适配大部分机型。
wxml
<view class='pocket_input' style='bottom:{{height}}px;' wx:if="{{inputShow}}" >
<input type='text' placeholder-style='input-placeholder' cursor='{{cursor_position}}' class='input_style' placeholder='随便说点什么吧~(30字以内哦)' focus='{{focus}}' cursor-spacing="2" adjust-position='{{adjust_position}}' maxlength='30' bindfocus="bindfocus" bindblur="bindblur" bindconfirm="bindconfirm"></input>
</view>
wxss
.pocket_input {
position: fixed;
bottom: 0;
width: 100%;
background-color: white;
overflow: hidden,
}
.input_style{
margin: 12rpx 23rpx;
background-color: #F4F5F6;
font-size: 30rpx;
border-radius: 20rpx;
padding-left: 15rpx;
}
.input-placeholder{
margin-left: 25rpx;
}
js
//监听input获得焦点
bindfocus: function(e) {
let that = this;
let height = 0;
let height_02 = 0;
wx.getSystemInfo({
success: function (res) {
height_02 = res.windowHeight;
}
})
height = e.detail.height - (app.globalData.height_01 - height_02);
console.log('app is', app.globalData.height_01);
that.setData({
height: height,
})
console.log('获得焦点的 e is', e);
},
//监听input失去焦点
bindblur: function(e) {
this.setData({
height: 0,
inputShow: false,
});
console.log('失去焦点的 e is', e);
},
我的页面效果设计是
点击讨论
然后让input获得焦点，
同时动态更改这个放置input的view的bottom属性，
做到input会随着小键盘的拉起， 被顶到小键盘的上方的效果。
这里有两点需要注意，第一点就是这个bottom值的获取，在input获得焦点的监听事件里，
e.detail.height 这个属性就是小键盘的拉起高度，获得这个值，然后bottom该值的高度。
只是做到这里你会发现，不同的机型，可能有的正好合适，有的
下方会有大块的留白，尤其IOS这样
原因是，
如果用的是小程序里的tarBar的话，（就app.json里配置那种），
此处是会自动加上这个高度的。
所以要把这个高度减去。
input才会随着小键盘拉起被顶到一个刚好合适的位置
方法如下
效果诸君亲测吧，有需要改进的地方请在下方留言