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

微信小程序聊天室功能

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

小程序项目新增一聊天室功能;控件是用该博主的https://blog.csdn.net/sinat_27612147/article/details/78456363;感谢博主提供如此方便的源码;功能需求:一:WebScoket链接这个是要创建小程序与后台间的连接,比较简单,微信api都有提供;https://developers.weixin.qq.com/miniprogram/dev/api/network-socket.html#wxclosesocket;二、聊天室置底本人使用该控件时发现并没有很好的解决聊天置底问题,跟进自己想法改造下;1、组件<scroll-view> 设置scroll-top属性  这是我一开始的处理方式,在收到消息和发送消息时获取聊天记录列表,然后根据长度动态设置 scroll-top值let chatItems = this.data.chatItems;this.setData({    scrollTopVal:chatItems.length*60+60  })  //scrollTopVal是<scroll-view/>的scroll-top属性值,*60是我这一个聊天记录大概60如果全是文字聊天这样是可行的,但是一旦出现了图片就不可行了。因为图片聊天高度是超过60的,我也不可能每次都去for聊天记录有多少图片,多少文字。 2、组件<scroll-view scroll-into-view=”{{toView}}”> 设置scroll-into-view属性(值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素)根据这个属性,我再列表的下方再添加一个<view id=”toView”></view>的空标签;然后同理在发送和接受到消息的时候this.setData({    toView:’toView’})这样我们就可以保证scroll-view可以置底了,美滋滋;三、聊天记录历史描述:我们在小程序上是不可能保存所有的聊天记录,所以暂时是只保存了50条记录,超过50条咋办?肯定是通过接口请求后台再渲染到小程序上。原以为很简单,只要根据<scroll-view/>提供的 bindscrolltoupper 属性便可实现,即滚动到顶部时触发scrolltoupper 事件请求接口获取数据,再将新老数据concat拼接。问题来了:这样一来,我们就永远是在顶部了,看过往数据只能上拉,看完再下拉到顶部加载新的记录;我们要实现的是像微信那样看记录只要一直下拉。解决方案:依旧是用scroll-into-view属性,我们拿到聊天记录数据时就给第一天添加一个id,然后出发scrolltoupper事件时获取该id,然后数据拼接完成后通过scroll-into-view回到id位置;(该方案并不优雅,还望各位大神提供更好的解决方案,谢谢).jsconsole.log(‘更多历史记录’);let store = [{type:’text’,content:’测试1′},{type:’text’,content:’测试2′},{type:’text’,content:’测试3′},{type:’text’,content:’测试4′},{type:’text’,content:’测试5′},{type:’text’,content:’测试6′},{type:’text’,content:’测试7′},{type:’text’,content:’测试8′},{type:’text’,content:’测试9′},{type:’text’,content:’测试10′},{type:’text’,content:’测试11′},{type:’text’,content:’测试12′},{type:’text’,content:’测试13′}];//测试数据      let currChatItems = this.data.chatItems;      store[0].showId = new Date().getTime();//给第一条数据添加id(注:scroll-into-view的值应为某子元素id(id不能以数字开头))      let id=”;    //列表每个有id我都添加了.prevId这个类,是为了方便我下边找      wx.createSelectorQuery().selectAll(‘.prevId’).fields({         id:true,      }, function(res){        id = res[0].id;        console.log(res)      }).exec();      this.setData({        chatItems:store.concat(currChatItems),      },()=>{        this.setData({           toView:id,          loading:true        })      })    }.wxml<template name=”chat-item”>    <view id=”{{item.showId?’view’+item.showId:”}}” class=”{{item.showId?’prevId’:”}}”>        <block wx:if=”{{item.type!==’custom’}}”>            <template is=”chat-time” data=”{{showTime:item.showTime,time:item.time}}”/>            <template is=”chat-word”                      data=”{{length:length,index:index,headUrl:item.headUrl,isMy:item.isMy,showTime:item.showTime,time:item.time,content:item.content,type:item.type,sendStatus:item.sendStatus}}”/>        </block>        <block wx:else>            <template is=”chat-custom” data=”{{content:item.content}}”/>        </block>    </view></template>

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏