uniapp 手写聊天页面

**UniApp手写聊天页面实现**

在本文中，我们将一步步地讲解如何使用UniApp框架开发一个基本的手写聊天页面。我们将重点关注页面布局、功能实现以及相关代码示例。

### 页面布局首先，我们需要设计好页面的布局结构。下面是我们的目标页面布局：

* 左侧：用户头像和昵称* 中间：聊天记录区域* 右侧：输入框区域我们将使用UniApp提供的`uni-grid`组件来实现左侧和右侧区域的布局。

### 页面代码示例

html<template>
 <view class="chat-page">
 <!-- 左侧区域 -->
 <view class="left-side">
 <image src="/static/user.jpg" mode="aspectFit"></image>
 <text>{{ userNick }}</text>
 </view>

 <!-- 中间区域 -->
 <view class="middle-side">
 <scroll-view scroll-y scroll-into-view="chatList" @scrolltolower="handleScrollToLower">
 <block v-for="(item, index) in chatList" :key="index">
 <view :class="{ 'my-chat': item.isMyChat }" @click="handleChatClick(item)">
 {{ item.content }}
 </view>
 </block>
 </scroll-view>
 </view>

 <!-- 右侧区域 -->
 <view class="right-side">
 <input type="text"
 v-model="inputValue"
 placeholder="输入内容..."
 @confirm="handleInputConfirm"
 @blur="handleInputBlur"
 />
 <button @click="handleSendClick">发送</button>
 </view>
 </view>
</template>

<script>
export default {
 data() {
 return {
 userNick: '小明',
 chatList: [
 { content: '你好', isMyChat: false },
 { content: '哈喽', isMyChat: true },
 // ...
 ],
 inputValue: '',
 };
 },

 methods: {
 handleScrollToLower() {
 // 滚动到底部时触发 },

 handleChatClick(item) {
 // 点击聊天记录时触发 },

 handleInputConfirm() {
 // 输入框确认时触发 },

 handleInputBlur() {
 // 输入框失去焦点时触发 },

 handleSendClick() {
 // 发送按钮点击时触发 },
 },
};
</script>

<style>
.chat-page {
 display: flex;
}

.left-side,
.right-side {
 width:50%;
 padding:20rpx;
 border-right:1rpx solid #ccc;
}

.middle-side {
 width:100%;
 padding:20rpx;
}
</style>

javascript// 发送按钮点击时触发handleSendClick() {
 const content = this.inputValue.trim();
 if (content) {
 // 将内容发送给对方 this.chatList.push({ content, isMyChat: true });
 this.inputValue = '';
 }
},

// 滚动到底部时触发handleScrollToLower() {
 // 加载更多的功能 const lastItem = this.chatList[this.chatList.length -1];
 if (lastItem) {
 // 将内容发送给对方 this.chatList.push({ content: '你好', isMyChat: false });
 }
},