JSAPI

  • Since 8.0

    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)
    

    入参

    名称类型描述必选默认值版本
    contentstring文字内容Y‘’8.0
    typestringnone / success / fail / exception。 excption类型必须传文案N‘none’8.1
    durationint显示时长,单位为毫秒。N20008.1
    xOffsetfloat左为正方向,单位为pxN010.0.15
    yOffsetfloat上为正方向,单位为pxN010.0.15
    fnfunction回调函数,当toast消失后被调用N

    使用注意

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