WebSocket聊天页面

最新推荐文章于 2025-03-03 20:46:33 发布

原创

最新推荐文章于 2025-03-03 20:46:33 发布 · 553 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

//聊天记录模式演示(vue)，vue中目前无法解决分页闪动问题，使用nvue可实现聊天记录无闪动分页
<template>
	<view class="container">
		<z-paging ref="paging" v-model="messages" use-page-scroll use-chat-record-mode @query="queryList"
			:hide-empty-view="true" @scroll="onScroll">
			// 聊天item
			<view id="chatMessages">
				<view v-for="(message, index) in messages" :key="index" :id="`z-paging-${index}`">
					<view class="message-time" v-if="message.time">{
   
   {
   
    $timestampToTime(message.time) }}</view>
					<view class="message-time" v-if="message.welcome">{
   
   {
   
    message.welcome }}</view>
					<view v-else>
						<view class="other-message" v-if="!message.isMyMessage">
							<view class="message-avatar nikeimg-right">
								<image :src="message.avatar" mode="" class="nikeimg"></image>
							</view>
							<view class="message-bubble">
								{
   
   {
   
    message.text }}
							</view>
						</view>
						<view class="my-message" v-else>
							<view class="message-bubble-m">
								{
   
   {
   
    message.text }}
							</view>
							<view class="message-avatar nikeimg-left">
								<image :src="message.avatar" mode="" class="nikeimg"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			// 底部聊天输入框
			<view class="chat-input" slot="bottom">
				<view class="chat-input-bg">
					<uni-easyinput v-model="newMessage" :styles="styles" :placeholderStyle="placeholderStyle"
						placeholder="在此处输入文本" :inputBorder='false' :clearable='false'></uni-easyinput>
					<view @click="sendMessage" type="primary" class="seed">发送</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				messages: [],
				newMessage: "",
				placeholderStyle: "font-size: 26rpx,font-weight: 500;color: #999999;",
				styles: {
   
   
					color: '#FFFFFF',
					paddingLeft: '6rpx'
				},
				scrollTop: 0, //滚动条位置
				scrollViewHeight: '', //滚动视图的高度
				socketConnected: false,
				myHeadimgurl: '',
				match_id: "",
				userId: '',
				scrollPosition: 0, // 数据用于控制滚动位置
			}
		},
		onHide() {