小程序制作仿微信聊天的细节处理

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

问题：

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)
    })
  },

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

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

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

来源：CSDN

作者：fortune-t

链接：https://blog.csdn.net/qq_40428678/article/details/90736924

标签

data

rect

科技新闻