全部产品

弱提示

更新时间:2020-04-13 16:44:45

此接口用于显示一个弱提示,可选择多少秒之后消失。

toast 接口的使用方法

  1. AlipayJSBridge.call('toast', {
  2. content: '操作成功',
  3. type: 'success',
  4. duration: 2000
  5. }, function() {
  6. alert("toast消失后执行");
  7. });
  8. // 可以通过 hideToast 接口隐藏已经弹出的 toast
  9. AlipayJSBridge.call('hideToast', {}, function() {
  10. });

代码示例

  1. <h1>点击以下按钮看不同效果</h1>
  2. <a href="javascript:void(0)" class="btn success">显示成功信息</a>
  3. <a href="javascript:void(0)" class="btn fail">显示失败信息</a>
  4. <a href="javascript:void(0)" class="btn exception">显示异常信息</a>
  5. <a href="javascript:void(0)" class="btn none">只显示信息</a>
  6. <a href="javascript:void(0)" class="btn duration">3.5s信息显示</a>
  7. <script>
  8. function toast(config, callback){
  9. AlipayJSBridge.call('toast',config, callback);
  10. }
  11. function ready(callback) {
  12. // 如果 jsbridge 已经注入则直接调用
  13. if (window.AlipayJSBridge) {
  14. callback && callback();
  15. } else {
  16. // 如果没有注入则监听注入的事件
  17. document.addEventListener('AlipayJSBridgeReady', callback, false);
  18. }
  19. }
  20. ready(function() {
  21. document.querySelector('.success').addEventListener('click', function() {
  22. toast({
  23. content: '操作成功',
  24. type: 'success'
  25. });
  26. });
  27. document.querySelector('.fail').addEventListener('click', function() {
  28. toast({
  29. content: '网络繁忙,请稍后再试',
  30. type: 'fail'
  31. });
  32. });
  33. document.querySelector('.exception').addEventListener('click', function() {
  34. toast({
  35. content: '发生异常,请注意',
  36. type: 'exception'
  37. });
  38. });
  39. document.querySelector('.none').addEventListener('click', function() {
  40. toast({
  41. content: '欢迎光临',
  42. });
  43. });
  44. document.querySelector('.duration').addEventListener('click', function() {
  45. toast({
  46. content: '请稍等',
  47. duration: 3500,
  48. }, function(e){
  49. alert('toast消失回调');
  50. });
  51. });
  52. });
  53. </script>

API

  1. AlipayJSBridge.call('toast', {
  2. content, type, duration
  3. }, fn)

入参

名称 类型 描述 必选 默认值
content string 文字内容。 Y “”
type string none / success / fail / exception。 excption 类型必须传文案。 N “none”
duration int 显示时长,单位为毫秒。 N 2000
xOffset float 左为正方向,单位为 px。 N 0
yOffset float 上为正方向,单位为 px。 N 0
fn function 回调函数,当 toast 消失后被调用。 N -

注意事项

  • toast 虽然会自动关闭,但是也可以通过 hideLoading 来关闭,这种使用方式不常见,但是要防止被 hideLoading 关闭。
  • 对于 Android 系统,需要注意的是,如果系统通知关闭,则此弹框不会出现。
  • Android 10.1.2 以下版本中,duration 显示时长只支持 2000/3500 两种,小于或等于 2000 的相当于 2000, 大于 2000 的相当于 3500。