微信小程序实现仿微信聊天界面

实现过程容易出现的问题
1、输入完内容之后页面没有自动滚动到页面底部
2、输入内容时候，原有的记录内容不会显示，被遮挡了
3、点击按钮发送（完成），需要点击两次才清空input内容（第一次是失去焦点，第二次是清空内容）
(这个问题只有在安卓手机才会出现)

解决第一个问题的方法是scrollTOP （写在点击完成这个事件）
wx.createSelectorQuery().select(’#chat’).boundingClientRect(function (rect) {
if (rect) {
// 使页面滚动到底部
console.log(rect.height);
wx.pageScrollTo({
scrollTop: rect.height
})
}
}).exec();

解决第二个问题是input动态设置bottom

html如下：
style=“bottom:{{inputBottom}}px”>

完 成

js代码如下 获取焦点时候，让底部预留出软键盘的高度，失去焦点之后恢复原来高度
focus: function (e) {
console.log(e)
this.setData({
inputBottom:e.detail.height
})
},
blur: function (e) {
console.log(e)
this.setData({
inputBottom: 0
})
},

解决第三个问题是 让其失去焦点之后，再清空内容

this.setData({
isfocus: false,
}, () => {
this.setData({
inputValue: ‘’
})
})