记录做的一次仿聊天的小程序碰到的一些细节

问题：

1.键盘输入框随内容自动增高

2.每次发完消息屏幕在发出消息的最底部（以及上拉在最上面）

3.键盘弹起不盖住屏幕内容

解决：

一、解决输入框内容的自动增高

如上图一样输入内容变多之后自动换行，而且限制高度（高度我们用max-height限制就好了）

那么我们来看看我们怎么让内容自动换行吧。

input   我们都知道输入内容会一直往后走，并不会自动换行（h5中可以给div加上contenteditable 操作等等，pc中可以操作dom判断换行操作等等）。

所以小程序我选择的是  textarea  标签，它有一个属性自动增高

写几行不想自动增高了可以给它一个max-height限制超出隐藏，这样就解决了问题。

二、解决一进入到页面就是在最底下 以及  发完送消息也在最下面  和  下拉也在最上面  页面显示问题

我们都习惯知道，一进入页面就是在消息列表的最下面，以及我们下拉刷新，刷新成功我们在刷新消息的最上面一些操作习惯

之前有人用wx.pageScrollTo下面这种方式去实现（个人感觉一进入页面就会有闪烁、页面大小算不准一些问题所以另外想了种办法）

// 获取容器高度，使页面滚动到容器底部  pageScrollToBottom: function() {                      wx.createSelectorQuery().select('#j_page').boundingClientRect(function(rect){              // 使页面滚动到底部                     wx.pageScrollTo({                            scrollTop: rect.bottom                        })}).exec()            },          j_page为页面容器的id使用rect.bottom          rect.height均能达到滚动到底部的效果在数据更新后（setData回调函数）使用

我最后使用的方法  使用  scroll-view  利用scroll-view  中的  属性

html:   

<scroll-view scroll-y  style="height:100vh"  bindscrolltoupper = "pullDownRefresh" scroll-into-view='{{toView}}'  >//你的聊天内容</scroll-view>

我们在渲染消息列表的时候绑定一个id，比如 id = "msg-{{index}}"   然后我们获取消息列表，toView 绑定的数  就是  'msg-' + (this.data.content.length - 1)  this.data.content就是你的消息列表的list的长度

这样我们一进入到页面就是在最下面一条消息的位置。

上拉刷新代码如下   （因为用的scroll-view   我们需要手动开启上拉刷新 ， 利用  bindscrolltoupper   事件执行）

  /**   * 下拉刷新   */  pullDownRefresh() {    var that = this;    wx.startPullDownRefresh({      success: res => {        if (that.data.currentPage * that.data.pageSize > that.data.total) {          // wx.showToast({          //   title: '暂无更多聊天记录',          //   icon: 'none'          // })          wx.stopPullDownRefresh();          return;        };        that.getChatDetail('pull');        that.setData({          toView: "msg-0"        })        wx.stopPullDownRefresh();      }    })  },

三、解决键盘弹起不遮盖屏幕内容

本以为设置可以解决这个问题，可是并不太友好。

那就看下面这种方式：

利用文本框的 bindfocus 可以获取键盘的高度，以及 wx.getSystemInfoSync() 获取页面的高度（点击查看getSystemInfoSync的api详情）

代码如下

   //获取焦点  bindInpFocus(e){    var windowHeight = wx.getSystemInfoSync().windowHeight;    log('聚焦', windowHeight - e.detail.height)    this.setData({scrollHeight: windowHeight - e.detail.height + "px",//绑定scroll-view的高度变化 初始值：100vh      toView : 'msg-' + (this.data.messageContent.length - 1),      fixBottom: e.detail.height + "px"                //键盘离底部的距离 = 键盘的高度的位置    })    log(this.data.scrollHeight)  },     //失去焦点  bindInpBurl(){    log('失焦')    this.setData({      scrollHeight : '100vh',      fixBottom : '0px',      toView: 'msg-' + (this.data.messageContent.length - 1)    })  },

以上就解决了三个细节问题。

聊天中的日期显示  ， 请看这篇过滤器的使用（日期格式化）

有问题请留言，看到评论及时回复（欢迎个人有更多好的方法，留言讨论）