uniapp开发app,开发AI机器人对话功能,包含停止回答,文字一个字一个字蹦出来,每次滚动到最底部,查看历史等功能

首先声明:前端自己写的模仿对话功能,未接入chatgpt接口,若接入接口,处理一下数据即可

               TipsCards 组件可以注释,没有啥用

视频:上传不上来,可联系作者查看,wx:17614860868

适应:安卓、IOS(均自测,暂无发现问题,代码可直接复制,即可使用)

<template>
    <view class="chat">
        <view class="box-bg" style="padding-top: var(--status-bar-height);">
            <uni-nav-bar>
                <block slot="left">
                    <view class="city">
                        <uni-icons type="contact" size="30" @click="toggle('left')"></uni-icons>
                    </view>
                </block>
                <view class="input-view">
                    <view class="">
                        对话
                    </view>
                    <view class="">
                        智能体
                    </view>
                    <view class="">
                        灵感
                    </view>
                </view>
                <block slot="right">
                    <uni-icons type="contact" size="30"></uni-icons>
                </block>
            </uni-nav-bar>
        </view>
        <scroll-view :style="{height: `${windowHeight-inputHeight}rpx`}" id="scrollview" scroll-y="true"
            :scroll-top="scrollTop" class="scroll-view">
            <TipsCards v-if="isTips" style="padding: 30rpx;"></TipsCards>
            <!-- 聊天主体 -->
            <view id="msglistview" class="chat-body">
                <!-- <view> -->
                <view class="item self" v-for="item in msgList">
                    <view class="item_s">
                        <view class="item_q">
                            <view class="" style="padding: 30rpx;">
                                { {item.content}}
                            </view>
                        </view>
                    </view>
                    <view class="item_e" style="">
                        <view class="item_b" style="">
                            <view class="" style="padding: 30rpx;">
                                { {item.contentChars}}
                            </view>
                        </view>
                    </view>

                </view>
                <!-- </view> -->
                <view class="" @click="stopFnc" style="margin: 0 auto;margin-bottom: 120rpx;" v-if="isShow">
                    停止回答
                </view>
            </view>
        </scroll-view>
        <!-- 底部消息发送栏 -->
        <!-- 用来占位,防止聊天消息被发送框遮挡 -->
        <view class="chat-bottom" :style="{height: `${inputHeight}rpx`}">
            <view class="send-msg" :

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值