微信小程序实现仿微信聊天界面(各种细节处理) |
您所在的位置：网站首页 › 怎么假造微信聊天 › 微信小程序实现仿微信聊天界面(各种细节处理) |
微信小程序实现仿微信聊天界面(各种细节处理)
|
下面先来看看效果
首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）： 1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将展示msg的目标scroll-view包裹， 通过js获取到该view的实际高度： var that = this; var query = wx.createSelectorQuery(); query.select('.scrollMsg').boundingClientRect(function(rect) { that.setData({ scrollTop: rect.height+'px'; }); }).exec();3.（推荐）将所有msg都编号如：msg-0，msg-1，msg-2… 直接锁定最后一条msg，滚动到那里。 在scroll-view中添加：scroll-into-view='{{toView}}'， 在wx:for后面添加：wx:for-index="index"， 在每个msg布局中添加：id='msg-{{index}}'， 最后直接： this.setData({ toView: 'msg-' + (msgList.length - 1) }) 到这里第二个问题解决了，那么我们回过来解决第一个问题： （点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题） 1.首先我们需要将input的自动向上推给关掉，这里有个坑：在input组件中添加：adjust-position='{{false}}'， 而不是：adjust-position='false'。 这么做虽然不再向上推，但却导致了软键盘弹起时，会遮挡屏幕下部分的消息。 2.如何解决软键盘弹起时，会遮挡屏幕下部分的消息？当软键盘弹起时，将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分，当软键盘收起时，再将scroll-view的高度还原，这样解决了遮挡问题。 提示： input中的bindfocus='focus'可获取软键盘高度并监听软键盘弹起，bindblur='blur'可监听软键盘收起，var windowHeight = wx.getSystemInfoSync().windowHeight;可获得屏幕高度。 scrollHeight（滚动条高度） = windowHeight（屏幕高度） - 软键盘高度; 最后将input组件放在软键盘上面就完成了。 | | | | | | | 各位要不要代码？| | | | | | | contact.js: // pages/contact/contact.js const app = getApp(); var inputVal = ''; var msgList = []; var windowWidth = wx.getSystemInfoSync().windowWidth; var windowHeight = wx.getSystemInfoSync().windowHeight; var keyHeight = 0; /** * 初始化数据 */ function initData(that) { inputVal = ''; msgList = [{ speaker: 'server', contentType: 'text', content: '欢迎来到英雄联盟，敌军还有30秒到达战场，请做好准备！' }, { speaker: 'customer', contentType: 'text', content: '我怕是走错片场了...' } ] that.setData({ msgList, inputVal }) } /** * 计算msg总高度 */ // function calScrollHeight(that, keyHeight) { // var query = wx.createSelectorQuery(); // query.select('.scrollMsg').boundingClientRect(function(rect) { // }).exec(); // } Page({ /** * 页面的初始数据 */ data: { scrollHeight: '100vh', inputBottom: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { initData(this); this.setData({ cusHeadIcon: app.globalData.userInfo.avatarUrl, }); }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 获取聚焦 */ focus: function(e) { keyHeight = e.detail.height; this.setData({ scrollHeight: (windowHeight - keyHeight) + 'px' }); this.setData({ toView: 'msg-' + (msgList.length - 1), inputBottom: keyHeight + 'px' }) //计算msg高度 // calScrollHeight(this, keyHeight); }, //失去聚焦(软键盘消失) blur: function(e) { this.setData({ scrollHeight: '100vh', inputBottom: 0 }) this.setData({ toView: 'msg-' + (msgList.length - 1) }) }, /** * 发送点击监听 */ sendClick: function(e) { msgList.push({ speaker: 'customer', contentType: 'text', content: e.detail.value }) inputVal = ''; this.setData({ msgList, inputVal }); }, /** * 退回上一页 */ toBackClick: function() { wx.navigateBack({}) } })contact.wxml: |
【本文地址】
今日新闻 |
推荐新闻 |