1. Toy模板网首页
  2. >Toy博客

简单的小程序聊天对话窗口界面

1年前作者：JefferyTan.分类：Toy博客阅读(7)违法举报

这篇具有很好参考价值的文章主要介绍了简单的小程序聊天对话窗口界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一个简单的微信小程序聊天对话窗口界面,包括发送文本功能

简单的小程序聊天对话窗口界面

直接上代码,js代码:

// 简单版
Page({
    data: {
        content: '',
        // 当前登录者信息
        login: {
            id: '2023',
            user: '大猪蹄子',
            avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752'
        },
        // 聊天信息
        chatList: [{
                msgId: '2023',
                nickname: '大猪蹄子',
                avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
                message: '一个简单的聊天对话窗口界面',
                type: 'text',
                date: '05-02 14:24' // 每隔5分钟记录一次时间
            },
            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '更多发送表情、视频以及图片功能,由于不好打包文件夹,请前往下方底部链接,下载完整版压缩包.',
                type: 'text'
            },
            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '该消息为撤回消息',
                type: 'custom'
            },
            {
                msgId: '2023',
                nickname: '大猪蹄子',
                avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
                message: '嘞 对头,解压文件夹后,可直接使用完整版',
                type: 'text'
            },
            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '若出现iOS不兼容现象,请自行调整哦',
                type: 'text',
                date: '05-04 16:05'
            },

            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '没有用苹果手机测试啦',
                type: 'text'
            },
            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '该消息为撤回消息',
                type: 'custom'
            },
            {
                msgId: '2023',
                nickname: '大猪蹄子',
                avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
                message: '请前往下方链接,使用完整版',
                type: 'text'
            },
            {
                msgId: '2023',
                nickname: '大猪蹄子',
                avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
                message: '谢谢各位亲的点赞关注和收藏',
                type: 'text'
            },
            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '哈哈哈',
                type: 'text',
                date: '05-06 11:21'
            },
            {
                msgId: '2022',
                nickname: '泡椒风爪',
                avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
                message: '已滑动至最底部',
                type: 'text',
                date: '05-07 19:08'
            },
        ],
    },
    onLoad() {
        this.scrollToBottom();
    },
    // 输入监听
    inputClick(e) {
        this.setData({
            content: e.detail.value
        })
    },
    // 发送监听
    sendClick() {
        var that = this;
        var list = this.data.chatList;
        // 获取当前时间
        var date = new Date();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minu = date.getMinutes();
        var now1 = month < 10 ? '0' + month : month;
        var now2 = day < 10 ? '0' + day : day;
        // 组装数据
        var msg = {
            msgId: this.data.login.id,
            nickname: this.data.login.user,
            avatar: this.data.login.avatar,
            message: this.data.content,
            type: 'text',
            date: now1 + '-' + now2 + ' ' + hour + ':' + minu
        }
        this.setData({
            chatList: list.concat(msg)
        }, () => {
            that.scrollToBottom();
            that.setData({
                content: ''
            })
        })
    },
    // 滑动到最底部
    scrollToBottom() {
        setTimeout(() => {
            wx.pageScrollTo({
                scrollTop: 200000,
                duration: 3
            });
        }, 600)
    },
})

wxml代码:

<!-- 简单版 -->
<view class="scroll-list">
    <block wx:for="{{chatList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
        <view wx:if="{{item.date}}" class="show-date">{{item.date}}</view>
        <view wx:if="{{item.type=='custom'}}" class="row tips-text">
            <text>{{login.id==item.msgId?'你':item.nickname}}撤回了一条消息</text>
        </view>
        <view class="{{login.id==item.msgId?'row row-self':'row'}}" wx:else>
            <view class="{{login.id==item.msgId?'head-self':'head-friend'}}">
                <image class="avatar" src="{{item.avatar}}"></image>
            </view>
            <view>
                <view wx:if="{{login.id!=item.msgId}}" class="nick">{{item.nickname}}</view>
                <view class="{{login.id==item.msgId?'message msg-self':'message msg-friend'}}">
                    <text>{{item.message}}</text>
                </view>
            </view>
        </view>
    </block>
</view>
<!-- 发送信息 -->
<view class="footer">
    <view class="row">
        <view class="input-box">
            <textarea class="text-area" placeholder-class="placeholder" show-confirm-bar="{{false}}" cursor-spacing="30" maxlength="500"
            disable-default-padding="{{true}}"
            confirm-hold="{{true}}" hold-keyboard="{{true}}" auto-height="false" placeholder="输入信息" bindinput="inputClick" value="{{content}}"></textarea>
        </view>
        <view class="send-btn" wx:if="{{content!=''}}">
            <text class="send-text" bindtap="sendClick">发 送</text>
        </view>
    </view>
</view>

wxss代码:

page {
    background-color: #f1f1f1;
}

.scroll-list {
    padding-bottom: 120rpx;
}

/* 显示时间 */
.show-date {
    text-align: center;
    font-size: 24rpx;
    padding: 15rpx 0;
    color: gray;
}

/* 每行对话样式 */
.row {
    display: flex;
    flex-direction: row;
    padding: 20rpx;
}

/* 提示信息 */
.tips-text {
    text-align: center;
    justify-content: center;
    font-size: 28rpx;
    color: gray;
}

.row-self {
    flex-direction: row-reverse;
}

/* 头像 */
.head-self {
    margin-left: 20rpx;
}

.head-friend {
    margin-right: 20rpx;
}

.avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.nick {
    color: gray;
    font-size: 24rpx;
    margin-bottom: 15rpx;
}

/* 消息内容 */
.message {
    background-color: white;
    font-size: 30rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    line-height: 45rpx;
}

.msg-self {
    border-top-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    color: #434343;
    background-image: linear-gradient(to right, #33ccff, #B0E2FF);
}

.msg-friend {
    border-top-right-radius: 30rpx;
    border-bottom-left-radius: 30rpx;
    color: #ffffff;
    background-image: linear-gradient(to right, #ff9933, #ff6633);
}

/* 以下为输入框样式 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: white;
    border-top: 1rpx solid #f1f1f1;
}

.input-box {
    flex: 5;
    border: 1rpx solid #f1f1f1;
    border-radius: 10rpx;
}

.send-btn {
    flex: 1;
    text-align: center;
    margin-left: 10rpx;
    color: white;
    margin-top: 10rpx;
}

.send-text {
    background-color: #FF6347;
    font-size: 30rpx;
    border-radius: 10rpx;
    padding: 12rpx 20rpx;
}

.text-area {
    max-height: 180rpx;
    width: 98%;
    padding: 15rpx 10rpx;
    font-size: 30rpx;
}

.placeholder {
    font-size: 30rpx;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

json代码:

{
  "usingComponents": {},
  "navigationBarTitleText": "聊天对话窗",
  "navigationBarBackgroundColor": "#FF6347"
}

更多功能的微信小程序聊天界面(包括发送表情、视频、图片),请点击链接:
https://download.csdn.net/download/weixin_45465881/87762409文章来源地址https://www.toymoban.com/news/detail-507002.html

到了这里，关于简单的小程序聊天对话窗口界面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

  • 【pyqt5界面化工具开发-8】窗口开发-QDialog对话框

    【pyqt5界面化工具开发-8】窗口开发-QDialog对话框

    目录 一、调用父类的菜单 二、添加更多的布局在对话框内 和前面Qwedget一样的结构（不做过多介绍） 可以参考代码中的注释 这和前面讲的Qwedget窗口布局基本上一样了 运行结果：

    2024年02月11日
    浏览(38)
  • 使用C++界面框架ImGUI开发一个简单程序

    使用C++界面框架ImGUI开发一个简单程序

    目录 简介 使用示例 下载示例 main文件 设置ImGui风格 设置字体 主循环 添加Application类 中文编码问题 界面设计 关于imgui_demo.cpp 创建停靠空间 创建页面 隐藏窗口标签栏 创建导航页面 创建内容页面 隐藏控制台窗口 打包程序 总结 待解决问题 开发优势 附件 ImGui 是一个用于C++的

    2024年02月13日
    浏览(11)
  • SpringBoot+Vue 整合websocket实现简单聊天窗口

    SpringBoot+Vue 整合websocket实现简单聊天窗口

    1 输入临时名字充当账号使用 2 进入聊天窗口 3 发送消息 （复制一个页面，输入其他名字，方便展示效果） 4 其他窗口效果 pom依赖 WebSocketConfig.java WebSocketServer.java MessageVo.java App.vue

    2024年02月09日
    浏览(8)
  • 仿chatGPT或chatPDF的前端界面布局，css实现对话聊天布局代码，响应式左右分栏布局（附完整源代码）

    仿chatGPT或chatPDF的前端界面布局，css实现对话聊天布局代码，响应式左右分栏布局（附完整源代码）

    chatPDF或者chatGPT的界面挺简洁的，就是一个左侧的列表以及右侧的对话列表，现在使用css实现这样的布局 充分运用了flex布局方式实现，左右分栏，以及对话形式展示效果 下面是效果图：   在手机设备看就隐藏左侧，右侧100%适应  下面就是html和css的布局代码  

    2023年04月22日
    浏览(10)

  • Flutter GetX 实现 ChatGPT 简单聊天界面

    Flutter 是一款跨平台的移动应用开发框架，而 GetX 是 Flutter 中一种简单易用的状态管理和路由管理工具。本篇我们将使用 Flutter 和 GetX 实现一个简单的聊天界面，以与 ChatGPT 进行交互。 我们需要在 Flutter 项目中引入 GetX 库。在 pubspec.yaml 文件中添加以下依赖： 在 main 函数中添

    2023年04月17日
    浏览(12)
  • 使用Streamlit 实现一个聊天机器人界面

    使用Streamlit 实现一个聊天机器人界面

    效果如下： 只需要效果generate_llama2_response 为你的 llm的输出即可。

    2024年03月09日
    浏览(42)
  • 微信小程序WebSocket实现stream流式聊天对话功能

    微信小程序WebSocket实现stream流式聊天对话功能

    要在微信小程序实现聊天对话功能，回话是流式应答，这里使用了WebSocket技术。WebSocket大家应该都很熟悉，使用wx.connectSocket就可以了。这里可能需要注意下的是流式应答，后端如何发送，前端如何接收。直接上代码： 可以扫码体验： 后端关键代码： 小程序ts代码： 可以扫码

    2024年04月10日
    浏览(18)
  • 可视化界面Tkinter编写你的小程序

    可视化界面Tkinter编写你的小程序

    本文将会介绍 Tkinter 模块的使用。Tkinter 模块是 Python 的标准 Tk GUI 工具包的接口。其中Tkinter 是唯一一个 Python 内置的标准库，虽然它做出来的 GUI 看上去比较不美观，但鉴于它可在多平台运行（Windows、Linux、macOS），因此我们可以用它来开发一些简单的小程序；而且tk中使用的

    2024年02月09日
    浏览(11)

  • 编程小窍门: 一个简单的go mutex的小例子

    本期小窍门用到了两个组件 mutex 这个类似其他语言的互斥锁 waitGroup 这个类似其他语言的信号量或者java的栅栏锁 示例如下

    2024年02月13日
    浏览(9)
  • 完善对话框，点击登录对话框，如果账号和密码匹配，则弹出信息对话框，给出提示R登录成功“，提供一个Ok按钮，用户点击OK后，关闭登录界面，跳转到其他界面,

    完善对话框，点击登录对话框，如果账号和密码匹配，则弹出信息对话框，给出提示R登录成功“，提供一个Ok按钮，用户点击OK后，关闭登录界面，跳转到其他界面,

    如果账号和密码不匹配，弹出错误对话框，给出信息\\\"账号和密码不匹配，是否重新登录\\\",并提供两个按钮Yes|No，用户点击Yes后，清除密码框中的内容，继续让用户进行登录，如果用户点击No按钮，则直接关闭登录界面如果用户点击取消按钮，则弹出一个问题对话框，给出信息

    2024年04月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包