TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

聊天列表自动到底，如果列表数据较短的时候，还没有好办法实现

Browse Source
This commit is contained in:
Jason.Chen
2022-02-18 17:02:32 +08:00
parent 0deef8bc6a
commit e957217635
2 changed files with 69 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages.json
View File

@@ -374,7 +374,10 @@
"path": "pages/im/private/chat", "path": "pages/im/private/chat",
"style": { "style": {
"navigationBarTitleText": "聊天", "navigationBarTitleText": "聊天",
"navigationBarBackgroundColor": "#F3F6FB" "navigationBarBackgroundColor": "#F3F6FB",
"app-plus": {
"bounce": "none"
}
} }
}, },
{ {

127
pages/im/private/chat.vue
View File

@@ -1,29 +1,31 @@
<template> <template>
<view class="chat"> <view class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<!-- chat --> <!-- chat -->
<view class="body"> <view class="body">
<view class="cell" v-for="(item, index) in messages" :key="index"> <view class="scroll">
<view class="time">{{ item.sentTime|timeCustomCN }}</view> <view class="cell" v-for="(item, index) in messages" :key="index">
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view class="time">{{ item.sentTime|timeCustomCN }}</view>
<u-avatar class="avatar" size="40" shape="square" <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
@click="showUser(item.senderUserId, item.messageDirection)" <u-avatar class="avatar" size="40" shape="square"
:src="contact(item.senderUserId).portraitUrl" /> @click="showUser(item.senderUserId, item.messageDirection)"
<view class="msg"> :src="contact(item.senderUserId).portraitUrl" />
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <view class="msg">
:msg="item.content" /> <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
:msg="item.content" /> <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
:msg="item.content" /> <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
<view class="state" v-if="item.messageDirection == 1"> :msg="item.content" />
<text <view class="state" v-if="item.messageDirection == 1">
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> <text
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -109,9 +111,8 @@
1, 1,
false, false,
(messages) => { (messages) => {
console.log(messages);
this.messages.unshift(...messages) this.messages.unshift(...messages)
// this.scrollBottom() this.scrollBottom()
}) })
}, },
// 获取消息列表 // 获取消息列表
@@ -124,7 +125,7 @@
true, true,
(messages) => { (messages) => {
this.messages = messages this.messages = messages
// this.scrollBottom() this.scrollBottom()
}) })
}, },
// 展示好友信息, type 1 是自己， 2 是对方 // 展示好友信息, type 1 是自己， 2 是对方
@@ -145,13 +146,6 @@
// 更新badge提醒数量 // 更新badge提醒数量
im.setNotifyBadge() im.setNotifyBadge()
} }
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
animated: false
})
}, 50)
} }
} }
} }
@@ -160,65 +154,72 @@
<style scoped lang="scss"> <style scoped lang="scss">
/* 窗口 */ /* 窗口 */
.chat { .chat {
background: $window-color;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column-reverse;
overflow: scroll;
.body { .body {
overflow: scroll;
flex: 1; flex: 1;
height: 0;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: flex-end;
.cell { .scroll {
padding: 10rpx 30rpx; display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
.time { .cell {
text-align: center; padding: 10rpx 30rpx;
font-size: 24rpx;
color: #666;
}
.cell-item { .time {
display: flex; text-align: center;
width: 690rpx; font-size: 24rpx;
justify-content: flex-start; color: #666;
&.left {
flex-direction: row;
} }
&.right { .cell-item {
flex-direction: row-reverse; display: flex;
width: 690rpx;
justify-content: flex-start;
.state { &.left {
flex-direction: row; flex-direction: row;
justify-content: flex-end;
} }
}
.msg { &.right {
margin: 0 20rpx; flex-direction: row-reverse;
.state { .state {
padding-top: 10rpx; flex-direction: row;
justify-content: flex-end;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
} }
}
.state-text-active { .msg {
font-size: $title-size-m - 2; margin: 0 20rpx;
color: #cecece;
.state {
padding-top: 10rpx;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;
}
} }
} }
} }
}
.cell-footer { .cell-footer {
height: 20rpx; height: 20rpx;
}
} }
} }
} }