nvue聊天窗口

pages/im/private/chat.nvue

@@ -1,10 +1,18 @@
 <template>
     <view class="chat">
         <!-- chat -->
-        <scroll-view class="chat-scroll" scroll-y="true" :scroll-into-view="toMsg" scroll-with-animation>
-            <view v-for="(item, index) in msgArr" :key="index" :id="'msg'+index">{{toMsg || '-'}} / msg{{item}} - {{index}}</view>
-        </scroll-view>
-        <!-- chat-footer -->
+        <list class="chat-scroll">
+            <cell class="cell" :class="{'left': index%2 == 0, 'right': index%2 == 1}" v-for="(item, index) in msgArr" :key="index">
+                <image class="active" src="" mode="aspectFill"></image>
+                <view class="msg">
+                    <imAUDIO :guest="index%2 == 1"></imAUDIO>
+                    <imIMG :guest="index%2 == 1"></imIMG>
+                    <imTXT :guest="index%2 == 1"></imTXT>
+                </view>
+            </cell>
+            <cell class="cell-footer" ref="chatBottom"></cell>
+        </list>
+        <!-- footer -->
         <view class="chat-footer">
             <view class="msg-type" @click="msgType">
                 <image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
@@ -24,24 +32,31 @@
 </template>
 
 <script>
+    const ChatList = uni.requireNativePlugin('dom')
+    import imAUDIO from '@/components/im/imAUDIO'
+    import imIMG from '@/components/im/imIMG'
+    import imTXT from '@/components/im/imTXT'
     export default {
         data() {
             return {
                 toMsg   : '',
                 msgArr  : [
-                    "NVUE界面信息"
+                    "NVUE界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息"
                 ],
                 importTabs: 1
             }
         },
-        
-        created() {
-            
-        },
+        components:{ imAUDIO, imIMG, imTXT },
         methods: {
             send(){
                 this.msgArr.push("新消息NVUE")
-                this.toMsg = 'msg' + (this.msgArr.length - 1)
+                // 此处等待数据渲染完成后滚动至底部
+                setTimeout(() => {
+                    let el  = this.$refs.chatBottom
+                    ChatList.scrollToElement(el, {
+                        animated: true
+                    })
+                },50)
             },
             msgType(){
                 this.importTabs = this.importTabs === 1 ? 0 : 1
@@ -59,54 +74,77 @@
     .chat-scroll{
         flex: 1;
     }
+    .cell{
+        width: 690rpx;
+        margin: 0 30rpx;
+        padding:10rpx 0;
+        justify-content: flex-start;
+    }
+    .cell-footer{
+        height: 20rpx;
+    }
+    .active{
+        width: 78rpx;
+        height: 78rpx;
+        background-color: white;
+        border-radius: 10rpx;
+    }
+    .msg{
+        margin: 0 20rpx;
+    }
+    .cell.left{
+        flex-direction: row;
+    }
+    .cell.right{
+        flex-direction: row-reverse;
+    }
     /* footer */
     .chat-footer{
         background: white;
-        padding: 20upx 30upx;
+        padding: 20rpx 30rpx;
         display: flex;
         justify-content: space-between;
         flex-direction: row;
-        
     }
     .msg-type{
-        width: 70upx;
-        height: 70upx;
+        width: 70rpx;
+        height: 70rpx;
     }
     .msg-type > .msg-type-icon{
-        margin: 5upx;
-        width: 60upx;
-        height: 60upx;
+        margin: 5rpx;
+        width: 60rpx;
+        height: 60rpx;
     }
     .chat-mp3{
         background: #F3F6FB;
-        height: 70upx;
-        line-height: 70upx;
+        height: 70rpx;
+        line-height: 70rpx;
         justify-content: center;
         align-items: center;
-        width: 460upx;
-        border-radius: 10upx;
-        margin-right: 15upx;
+        width: 460rpx;
+        border-radius: 10rpx;
+        margin-right: 15rpx;
     }
     .chat-mp3-text{
-        font-size: 30upx;
+        font-size: 30rpx;
         color: #333;
     }
     .chat-input{
         background: #F3F6FB;
-        height: 70upx;
-        width: 460upx;
-        border-radius: 10upx;
-        margin-right: 15upx;
-        padding: 0 20upx;
+        height: 70rpx;
+        width: 460rpx;
+        border-radius: 10rpx;
+        margin-right: 15rpx;
+        padding: 0 20rpx;
     }
     .chat-push{
         background: #34CE98;
         color: white;
-        width: 120upx;
-        line-height: 70upx;
+        width: 120rpx;
+        line-height: 70rpx;
         text-align: center;
-        border-radius: 10upx;
-        font-size: 30upx;
+        border-radius: 10rpx;
+        font-size: 30rpx;
         font-weight: bold;
     }
 </style>