E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

记录做的一次仿聊天的小程序碰到的一些细节问题: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)    })  }, 以上就解决了三个细节问题。聊天中的日期显示  , 请看这篇过滤器的使用(日期格式化)有问题请留言,看到评论及时回复(欢迎个人有更多好的方法,留言讨论)小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序制作仿微信聊天的细节处理
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏