详解微信小程序实现仿微信聊天界面(各种细节处理)


Posted in Javascript onFebruary 17, 2019

本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下:

下面先来看看效果

详解微信小程序实现仿微信聊天界面(各种细节处理)

为实现这样的效果,首先要解决两个问题:

1.点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题;

2.键盘弹出或收起时,聊天消息没有自动滚到最底部。

首先解决第二个问题,自动滚动到最底部,这很简单,这里提供三种方法(推荐第三种):

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:

<!--pages/contact/contact.wxml-->

<view>

 <scroll-view scroll-y scroll-into-view='{{toView}}' style='height: {{scrollHeight}};'>
  <!-- <view class='scrollMsg'> -->
  <block wx:key wx:for='{{msgList}}' wx:for-index="index">

   <!-- 单个消息1 客服发出(左) -->
   <view wx:if='{{item.speaker=="server"}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
    <view style='width: 11vw; height: 11vw;'>
     <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='../../images/contact_member.png'></image>
    </view>
    <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
     <image style='width: 4vw;' src='../../images/left_msg.png' mode='widthFix'></image>
    </view>
    <view class='leftMsg'>{{item.content}}</view>
   </view>

   <!-- 单个消息2 用户发出(右) -->
   <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
    <view class='rightMsg'>{{item.content}}</view>
    <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
     <image style='width: 4vw;' src='../../images/right_msg.png' mode='widthFix'></image>
    </view>
    <view style='width: 11vw; height: 11vw;'>
     <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='{{cusHeadIcon}}'></image>
    </view>
   </view>

  </block>
  <!-- </view> -->

  <!-- 占位 -->
  <view style='width: 100%; height: 18vw;'></view>
 </scroll-view>

 <view class='inputRoom' style='bottom: {{inputBottom}}'>
  <image style='width: 7vw; margin-left: 3.2vw;' src='../../images/pic_icon.png' mode='widthFix'></image>
  <input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input>
 </view>
</view>

contact.wxss:

/* pages/contact/contact.wxss */

page {
 background-color: #f1f1f1;
}

.inputRoom {
 width: 100vw;
 height: 16vw;
 border-top: 1px solid #cdcdcd;
 background-color: #f1f1f1;
 position: fixed;
 bottom: 0;
 display: flex;
 align-items: center;
 z-index: 20;
}

input {
 width: 76vw;
 height: 9.33vw;
 background-color: #fff;
 border-radius: 40rpx;
 margin-left: 2vw;
 padding: 0 3vw;
 font-size: 28rpx;
 color: #444;
}

.leftMsg {
 font-size: 35rpx;
 color: #444;
 line-height: 7vw;
 padding: 2vw 2.5vw;
 background-color: #fff;
 margin-left: -1.6vw;
 border-radius: 10rpx;
 z-index: 10;
}

.rightMsg {
 font-size: 35rpx;
 color: #444;
 line-height: 7vw;
 padding: 2vw 2.5vw;
 background-color: #96EB6A;
 margin-right: -1.6vw;
 border-radius: 10rpx;
 z-index: 10;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
详解vue v-model
Aug 31 Javascript
js实现星星海特效的示例
Sep 28 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 #Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 #Javascript
详解Element 指令clickoutside源码分析
Feb 15 #Javascript
You might like
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
React中的render何时执行过程
2018/04/13 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
个人求职信范文分享
2014/01/31 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
自强之星事迹材料
2014/05/12 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
全陪导游词
2015/02/04 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
在js中修改html body的样式
2021/11/11 Javascript
小程序自定义轮播图圆点组件
2022/06/25 Javascript