58.搜房等网站怎么做效果才好,品牌建设费用,汕头网站制作网站,小型企业的网站建设论文界面结构:
消息列表: 使用 scroll-view 实现滚动#xff0c;每条消息使用 view 组件包裹#xff0c;根据消息类型 (文本、图片、文件) 显示不同内容。输入框区域: 包含输入框 (textarea)、发送按钮 (button) 和上传文件按钮 (view 组件模拟)。头像: 使用 image 组件展示。
…界面结构:
消息列表: 使用 scroll-view 实现滚动每条消息使用 view 组件包裹根据消息类型 (文本、图片、文件) 显示不同内容。输入框区域: 包含输入框 (textarea)、发送按钮 (button) 和上传文件按钮 (view 组件模拟)。头像: 使用 image 组件展示。
功能实现:
多行输入框高度自适应: 使用 textarea 组件的 auto-height 属性并监听 linechange 事件动态调整高度。消息气泡样式: 使用 CSS 实现不同类型消息的气泡样式。发送消息: 点击发送按钮或输入框回车时将消息内容添加到消息列表中并清空输入框。上传文件: 点击上传文件按钮调用小程序 API 选择文件并上传。
代码示例:
!-- pages/chat/chat.wxml --
view classcontainerscroll-view classmessage-list scroll-ytrue styleheight:{{scrollHeight}}px;view classmessage-item {{item.isMe?message-item-right:message-item-left}} wx:for{{messages}} wx:keyindeximage classavatar src{{item.isMe?my-avatar.png:other-avatar.png}}/imageview classmessage-content {{item.isMe?message-content-right:message-content-left}}view wx:if{{item.type text}}{{item.content}}/viewimage wx:if{{item.type image}} src{{item.content}} modewidthFix/imageview wx:if{{item.type file}} classfile-messagetext classfile-name{{item.content.name}}/texttext classfile-size{{item.content.size}}/text/view/view/view/scroll-viewview classinput-areaview classinput-barview classupload-btn bindtapuploadFile/viewtextarea classinput-text auto-height value{{inputValue}} bindinputonInput bindconfirmsendMessage placeholder请输入消息内容 /button classsend-btn bindtapsendMessage发送/button/view/view
/view// pages/chat/chat.js
Page({data: {scrollHeight: 0, // 滚动区域高度inputValue: , // 输入框内容messages: [{ isMe: false, type: text, content: 你好 },{ isMe: true, type: text, content: 你好请问有什么可以帮您 },],},// 页面加载时获取滚动区域高度onLoad: function () {const that this;wx.getSystemInfo({success: function (res) {that.setData({scrollHeight: res.windowHeight - 50, // 50 为输入框区域高度});},});},// 监听输入框内容变化onInput: function (e) {this.setData({inputValue: e.detail.value,});},// 发送消息sendMessage: function () {if (this.data.inputValue.trim() ) return;this.data.messages.push({isMe: true,type: text,content: this.data.inputValue,});this.setData({messages: this.data.messages,inputValue: ,});// 滚动到底部this.scrollToBottom();},// 上传文件uploadFile: function () {const that this;wx.chooseMessageFile({count: 1, // 只允许选择一个文件type: all, // 可以选择任意类型的文件success: function (res) {const file res.tempFiles[0];// 将文件信息添加到消息列表中that.data.messages.push({isMe: true,type: file,content: {name: file.name,size: that.formatFileSize(file.size),},});that.setData({messages: that.data.messages,});// 滚动到底部that.scrollToBottom();// TODO: 上传文件到服务器// wx.uploadFile({// // ...// });},});},// 格式化文件大小formatFileSize: function (size) {if (size 1024) {return size B;} else if (size 1024 * 1024) {return (size / 1024).toFixed(1) KB;} else if (size 1024 * 1024 * 1024) {return (size / (1024 * 1024)).toFixed(1) MB;} else {return (size / (1024 * 1024 * 1024)).toFixed(1) GB;}},// 滚动到底部scrollToBottom: function () {this.setData({scrollTop: 999999,});},
});/* pages/chat/chat.wxss */
.container {display: flex;flex-direction: column;height: 100%;padding-bottom: 0rpx;padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS11.2*/padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS11.2*/
}.message-list {flex: 1;padding: 20rpx;
}.message-item {display: flex;padding-bottom: 20rpx;
}.message-item-left {justify-content: flex-start;
}.message-item-right {flex-direction: row-reverse;
}.avatar {width: 80rpx;height: 80rpx;border-radius: 50%;margin: 10rpx;
}.message-content {max-width: 70%;padding: 20rpx;border-radius: 10rpx;
}.message-content-left {background-color: #77dbd3;
}.message-content-right {background-color: #9eea6a;
}.input-area {height: 50px;padding: 10rpx;background-color: #f6f6f6;
}.input-bar {display: flex;align-items: center;background-color: #fff;border-radius: 10rpx;
}.upload-btn {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;margin-left: 10rpx;background-color: #f6f6f6;border-radius: 50%;
}.input-text {flex: 1;height: 80rpx;padding: 10rpx;font-size: 28rpx;line-height: 40rpx;
}.send-btn {width: 120rpx;height: 80rpx;line-height: 80rpx;text-align: center;margin-left: 10rpx;background-color: #07c160;color: #fff;border-radius: 10rpx;
}.file-message {display: flex;flex-direction: column;
}.file-name {font-size: 24rpx;
}.file-size {font-size: 20rpx;color: #999;
}注意:
代码中只实现了基本功能还有很多细节可以优化例如消息时间显示、图片预览、文件下载等。上传文件功能需要配合后端接口实现。样式可以根据实际需求进行调整。
希望以上代码可以帮助你!
