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

港控/mmm° 2022-01-23 03:53 473阅读 0赞

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

**问题：**

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

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

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

**解决：**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70][]

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

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

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

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

写几行不想自动增高了可以给它一个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  中的  ![20190602110230131.png][]属性

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

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

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

那就看下面这种方式：

利用文本框的bindfocus 可以获取键盘的高度，以及 wx.getSystemInfoSync() 获取页面的高度（点击查看[getSystemInfoSync的api][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)
        })
      },

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70]: /images/20220123/492b84f46c60476893f7da6bd0c8d1a9.png
[20190602104842834.png]: /images/20220123/fed22ffdb3554ca6bd2c05001ff53517.png
[20190602110230131.png]: /images/20220123/32124f9c883b4b5d9b58d524c3e32887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70 1]: /images/20220123/5af1a302ed91401c8b817a99009104cc.png
[getSystemInfoSync_api]: https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html
[Link 1]: https://blog.csdn.net/qq_40428678/article/details/90318962