diagnosis_app/components/IM/index.vue

<template>	
	<view class="chat-room">
	  <scroll-view id="scrollview" class="room" :scroll-top="scrollTop" scroll-y="true" > 
		<view class="chat-container">
			<view class="item" v-for="(item,index) in chats" :key="index"
				  :class="item.type==='mine'?'lf':''">
				<view class="avatar">
					<!-- #ifdef MP-WEIXIN -->
						<open-data  type="userAvatarUrl"  class="avatar-tag" v-if="item.type==='mine'"></open-data>
						<image src="/static/images/avatar.png" class="avatar-tag" mode="widthFix" v-if="item.type!=='mine'"></image>
						<text class="username">{{item.user}}</text>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
						<image src="/static/images/avatar.png" class="avatar-tag" mode="widthFix"></image>
						<text class="username">{{item.user}}</text>
					<!-- #endif -->
				</view>
				<view class="msgbox">
				  <text class="msg">{{item.msg}}</text>
				</view>    
			</view> 			
		</view>
	  </scroll-view>
	  <view class="send">
		<input 
			class="sendInput"
			type="text"
			v-model="sendMsg"
			cursor-spacing="20"
			@confirm="sendMessage"
			confirm-type="发送"
		  >
		  </input>    
		<button type="default" size="mini" @click="sendMessage" class="sendBt">发送</button>
	  </view>
	</view>
</template>

<script>
	export default {
		name:"IM-chat",
		props:{
			chats:{
				type:[Array],
				default:()=>[]
			}
		},
		watch:{
			chats(){
				if(this.chats.length>1){
					this.scrollToBottom();
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				sendMsg:''
			}
		},
		methods: {
			sendMessage(){
				this.$emit('send',this.sendMsg);
				this.sendMsg="";
			},
			scrollToBottom: function () {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.chat-container').boundingClientRect(data => {
					this.scrollTop=data[0].height;
				}).exec();
			}					
		}
	}
</script>

<style lang="scss" scoped>
	@import url('./index.css') 
</style>