当前位置:主页 > 微信开发 > WeUI >

微信网页开发操作反馈弹出式提示Toast

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-05
  网页设计的最重要的一个参考是用户的体验,可以说一个网页从美观、样式、布局等都要考虑用户的感受,网页如何设计制作让用户更加舒服是非常重要的,因为,网页就是给用户使用的,所以,网页设计的无论是网站的网页还是微信小程序的网页还是其它的网页,都应当把用户作为参考对象来设计网页。

  当用户在一个小程序里面操作了某一个功能,如果操作成功了就弹出一个提示信息,这是非常友好的,这样让用户感觉自己的操作已经完全,如果没有提示信息则让用户感觉到底操作成功了没有?这不仅会让用户迷惑,还可能增加不必要的流量负担(因为,每操作一起可能要消耗一点手机流量),这样非常不利于用户体验。

  在很多小程序里面,当一个小程序页面数据太多的时候如果用一个页面都显示数据,这样让用户感觉太长了,容易产生审美疲劳,如果把其它数据通过一个按扭“查看更多”来隐藏掉其它数据,当用户还想看其它数据时,就点击一下这个按扭,来获取其它数据,因为可能数据比较多,当用户点击“查看更多”时,可能要等一会儿,如果用户点“查看更多”后,就有一个提示信息“正在加载”让用户感觉这个小程序一直在为自己的操作而努力加载着,这样用户就有一种很好的体验,如果没有提示的话,用户就不知道到底还要加载多久了,用户也不知道小程序是不是在为用户点击后在帮用户加载,用户不知道可能就会再次点击或是离开这个页面甚至离开小程序,这就是非常不好的用户体验。

  WeUI提供了弹出式提示组件Toast,当在成功时弹出一个提示信息,然后,过几秒就消失,如果想加载一个东西也会弹出一个提示信息,然后,几秒后就消失。

示例:

已完成toast

<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已完成</p>
    </div>
</div>

Loading

  loading 形态类似于 toast,只是图标是旋转的 loading,用于从服务端拉取数据/向服务端提交数据等耗时操作。

toast加载
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>

提醒:WeUI 不推荐在 toast 中展示失败状态,失败状态应该使用 Alert 明确告知用户失败原因