toast 弱提示

toast

显示一个弱提示，可选择多少秒之后消失

使用方法

AlipayJSBridge.call('toast', {
  content: '操作成功',
  type: 'success',
  duration: 2000
}, function() {
  alert("toast消失后执行");
});

// 可以通过hideToast接口隐藏已经弹出的toast

AlipayJSBridge.call('hideToast', {}, function() {
});

代码演示

各种类型演示

<h1>点击以下按钮看不同效果</h1>
<a href="javascript:void(0)" class="btn success">显示成功信息</a>
<a href="javascript:void(0)" class="btn fail">显示失败信息</a>
<a href="javascript:void(0)" class="btn exception">显示异常信息</a>
<a href="javascript:void(0)" class="btn none">只显示信息</a>
<a href="javascript:void(0)" class="btn duration">3.5s信息显示</a>

<script>
function toast(config, callback){
  AlipayJSBridge.call('toast',config, callback);
}

function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.success').addEventListener('click', function() {
    toast({
      content: '操作成功',
      type: 'success'
    });
  });

  document.querySelector('.fail').addEventListener('click', function() {
    toast({
      content: '网络繁忙，请稍后再试',
      type: 'fail'
    });
  });

  document.querySelector('.exception').addEventListener('click', function() {
    toast({
      content: '发生异常，请注意',
      type: 'exception'
    });
  });

  document.querySelector('.none').addEventListener('click', function() {
    toast({
      content: '欢迎光临',
    });
  });

  document.querySelector('.duration').addEventListener('click', function() {
    toast({
      content: '请稍等',
      duration: 3500,
    }, function(e){
      alert('toast消失回调');
    });
  });
});
</script>

API

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

入参

使用注意

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