弱提示

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)

入参