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)

入參