scorll-view

pages/im/private/chat.vue

@@ -1,9 +1,9 @@
 <template>
     <view class="chat">
         <!-- chat -->
-        <scroll-view class="body" scroll-y>
-            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="time">{{ customCN(item.sentTime) }}</view>
+        <view class="body">
+            <view class="cell" v-for="(item, index) in messages" :key="index">
+                <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                 <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                     <u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)"
                         :src="contact(item.senderUserId).portraitUrl" />
@@ -21,16 +21,12 @@
                     </view>
                 </view>
             </view>
-            <view class="cell-footer" ref="chatBottom"></view>
-        </scroll-view>
+        </view>
         <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
 
 <script>
-    import {
-        timeCustomCN
-    } from '@/utils/filters.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
     import showVoice from '../components/showVoice'
@@ -38,8 +34,6 @@
     import showText from '../components/showText'
     import sentMessageBar from '../components/sentMessageBar'
 
-    const ChatList = uni.requireNativePlugin('dom')
-
     export default {
         components: {
             sentMessageBar,
@@ -106,9 +100,6 @@
             uni.$off('onReadReceiptReceived')
         },
         methods: {
-            customCN(val) {
-                return timeCustomCN(val)
-            },
             getNewMessage() {
                 im.getMessageList(
                     this.conversationType,
@@ -116,10 +107,9 @@
                     this.latestMessage.sentTime || 0,
                     1,
                     false,
-                    (messages) => {
-                        console.log(messages);
-                        this.messages = this.messages.concat(messages)
-                        this.scrollBottom()
+                    (messages) => {
+                        this.messages = [...messages, ...this.messages]
+                        // this.scrollBottom()
                     })
             },
             // 获取消息列表
@@ -131,9 +121,8 @@
                     100,
                     true,
                     (messages) => {
-                        console.log(messages);
-                        this.messages = messages.reverse()
-                        this.scrollBottom()
+                        this.messages = messages
+                        // this.scrollBottom()
                     })
             },
             // 展示好友信息,  type 1 是自己， 2 是对方
@@ -174,12 +163,15 @@
         display: flex;
         flex-direction: column;
 
-        .body {
-            flex: 1;
-            overflow: scroll;
+        .body {
+            flex: 1;
+            overflow-y: scroll;
+            display: flex;
+            flex-direction: column-reverse;
+            justify-content: flex-end;
 
             .cell {
-                padding: 10rpx 30rpx;
+                padding: 10rpx 30rpx;
 
                 .time {
                     text-align: center;