微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样

重点看标红部分，其他代码只是写的上下逻辑，可忽略

wxml:

<scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" scroll-into-view="{{scrollBottom}}" class="barrage" bindscrolltolower="scrollBottomMet">

<text decode="{{true}}" style="{{item.msgType==2?'color:orange':item.msgType==3?'color:green':item.isManage==1?'color:red':item.isSelf?'':'color:yellow'}}">{{item.nickName}}{{item.msgType==1?'：':' '}}</text>

<text>{{item.chatContent}}</text>

</view>

</scroll-view>

<view class="hasMoreChat" wx:if="{{hasMore}}" bindtap="toBottom">底部有新消息 ↓</view>

</view>

index.js:

Page({

/**

* 页面的初始数据

data: {

hasMore: false,

scrollBottom: "1rpx",

}

//当收到服务器来信时

socketTask.onMessage(res => {

let msg = res.data,

msgArr = msg.split(":"),

newMsg = msg.split(msgArr[0] + ":")[1],

content = newMsg.split("-");

if (msg.indexOf("TextMsg:") != -1) { //文字信息=>TextMsg:用户编号-昵称-消息内容-是否管理员

let isSelf = false,chatMsg=JSON.parse(newMsg)

if (chatMsg.commonCode == _this.data.markCustCode) { //本人所发

isSelf = true

}

let chatRecord = _this.data.chatRecord;

chatMsg.isSelf=isSelf

chatMsg.msgType=1 //普通消息

chatRecord.push(chatMsg)

_this.setData({

chatRecord,

// scrollTop: _this.data.swiperHeight * chatRecord.length,有新消息来自动回到底部

//看历史消息的时候，有新消息来，底部出现有更多消息字样

hasMore: true

})

//进入自动在底部往后台发请求那数据

getChatRecord() {

let _this = this

POST_UNLOAD('liveChatRecord/list', {

liveId: _this.data.info.liveId,

round: _this.data.info.round,

current: 1,

size: 50,

isAsc: false

}, function (res, resCode) {

if (resCode == 200) {

let {

result

} = res.data

result.records.reverse()

result.records.forEach(e => {

e.isSelf = (e.markCustCode == _this.data.markCustCode) ? true : false

e.msgType = 1 //普通消息

})

_this.setData({

chatRecord: result.records,

scrollBottom: "scrollBottom"

})

}

});

//点击更多消息底部有新消息字样消失

scrollBottomMet() {

this.setData({

hasMore: false

})

//点击底部有新消息字样立马置底

toBottom() {

this.setData({

scrollBottom: "scrollBottom"

})

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样相关推荐

微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序初始界面设置密码
如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码.这里介绍一种觉得比较可行的方法,具体实现如下: 最终效果: 代码实现: wxml: <input cl ...
微信小程序：开心锤锤超火动态表情包微信小程序源码下载自动采集
这是一款表情包小程序源码大家刷抖音的时候应该都刷过开心锤锤这个网红卡通短视频吧现在这一款小程序就是和它有关的里面的表情包呢大部分都是动态表情包(斗图的时候是不是更炫) 至于里面的表情包人物的就都 ...
NLP微信小程序聊天机器人
今天把两年前大二时候的小程序又拿来玩了一下,决定开源这个小项目一个NLP微信小程序聊天机器人,前端就一个页面,后端是php的,可以接图灵等等各种api,也可以自己写个python的接口做NLP算法测 ...
微信小程序开发之编译自动生成新文件的解决办法
文章目录前言微信小程序开发中一自动编译就自动生成一些wxss,wxml,文件的解决办法一. 问题详情二.为什么会出现这个情况三.解决办法 1.找到app.json文件夹下的具体页面详情 2. ...
php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样相关推荐

最新文章

热门文章

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现 底部有更多消息字样

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现 底部有更多消息字样相关推荐

最新文章

热门文章

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样

微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样相关推荐