记录一个前后台频繁交互(交互时间较长)导致的用户体验不佳问题的解决方案

在批量下发业务过程中,用户点击批量下发后需长时间等待,导致体验不佳。为改善这一状况,采用了Bootstrap3的进度条和Easy UI模态框来提示用户操作状态,确保他们知道系统正在处理请求,从而避免用户疑惑是否应刷新页面。通过这种方式,提升了用户在长时间交互过程中的体验。
摘要由CSDN通过智能技术生成

此处要引一下bootstrap的包

版本好像是bootstrap3,

背景是一个批量下发的业务,用户选中要下发的业务之后、点击批量下发按钮会有很长一段时间的等待时间;

一位测试MM说:“交互时间太长了,我甚至不知道该等下去还是刷新页面了”

关于这个问题,

bootstrap3的进度条:

<div class="modal-body">
                    <div id="progress_striped" class="progress progress-striped active" style="display: none">
                        <div id="progress_striped_strip" class="progress-bar progress-bar-success" role="progressbar"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 10%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                    <span id="message"></span>
                </div>

Easy UI模态框:

<!--提示弹窗 start-->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div cl
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值