important point:
1.style='bottom:{ {inputBottom}}px'The unit is px
2. Input adjust-position='{ {false}}' to use false
html part:
<!-- start input box-->
<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 input box -->
css part:
.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 part:
//Enter focus
foucus: function (e) {
var that = this;
that.setData({
inputBottom: e.detail.height
})
},
//Lost focus
blur: function (e) {
var that = this;
that.setData({
inputBottom: 0
})
},
//User input content-submit input
submit:function(){
var that = this;
console.info(that.data.inputText);
if (!that.data.inputText){
wx.showToast({
icon:'none',
title:'Please enter content'
})
return false;
}
talkList.push({
who: 2,
text: that.data.inputText
})
that.setData({
talkList: talkList,
inputText:'',
//inputBottom: 0
})
that.scrollToBottom();
},