小程序input输入框键盘弹出使得布局上移问题

注意点：

1.style='bottom:{{inputBottom}}px'单位用px

2.input的 adjust-position='{{false}}'要用false

html部分：

<!-- start 输入框 -->

<view class='inputBottom' style='bottom:{{inputBottom}}px'>

<input type='text' class='textInput' value='{{inputText}}' placeholder-class='textInputPlaceHolder' placeholder='输入你想要说的...' bindinput='getInputText' bindfocus="foucus" bindblur="blur" bindconfirm='submit' adjust-position='{{false}}'></input>

<text bindtap='submit' class='submit'>发送</text>

</view>

<!-- end 输入框 -->

css部分：

.inputBottom{

width: 100%;

position: fixed;

left: 0rpx;

bottom: 0rpx;

background: #fff;

height: 100rpx;

box-sizing: border-box;

padding: 18rpx 10rpx;

}

.inputBottom .textInput{

/* border-bottom: 2rpx solid #000; */

display: inline-block;

width: 80%;

}

.inputBottom .textInputPlaceHolder{

font-size: 30rpx;

}

.inputBottom .submit{

font-size: 34rpx;

display: inline-block;

text-align: center;

float: right;

margin-right: 20rpx;

background: green;

border-radius: 6rpx;

color: #fff;

padding: 2rpx 8rpx;

}

js部分：

//输入聚焦

foucus: function (e) {

var that = this;

that.setData({

inputBottom: e.detail.height

})

},

//失去聚焦

blur: function (e) {

var that = this;

that.setData({

inputBottom: 0

})

},

//用户输入内容--提交输入

submit:function(){

var that = this;

console.info(that.data.inputText);

if (!that.data.inputText){

wx.showToast({

icon:'none',

title:'请输入内容'

})

return false;

}

talkList.push({

who: 2,

text: that.data.inputText

})

that.setData({

talkList: talkList,

inputText:'',

//inputBottom: 0

})

that.scrollToBottom();

},