ap.showToast 显示弱提示

优质

小牛编辑

133浏览

2023-12-01

ap.showToast(OPTION | content, CALLBACK)

显示弱提示。可选择多少秒之后消失。可直接传入一个字符串作为 OPTION.content 参数。

OPTION 参数说明

名称	类型	必填	描述
content	String	是	文字内容
type	String	否	toast 类型，展示相应图标，默认 none，支持 success / fail / exception / none’。其中 exception 类型必须传文字信息
duration	Number	否	显示时长，单位为 ms，默认 2000

CALLBACK 参数说明

toast消失后调用

代码示例

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

<h2>点击以下按钮查看不同效果</h2>

<button class="toast-btn btn btn-default">success</button>
<button class="toast-btn btn btn-default">fail</button>
<button class="toast-btn btn btn-default">exception</button>
<button class="toast-btn btn btn-default">none</button>
<button class="btn btn-default">展示3秒并执行回调</button>

<script>
  var btns = document.querySelectorAll('.toast-btn');
  var btn = document.querySelector('#J_btn');
  var contents = {
    success: '操作成功',
    fail: '系统繁忙',
    exception: '网络异常',
    none: '忙不过来了，客官请稍候'
  };
  [].forEach.call(btns, function(btn){
    btn.addEventListener('click', function(){
      var type = this.innerHTML;
      ap.showToast({
        content: contents[type],
        type: type
      });
    });
  });
  btn.addEventListener('click', function(){
    ap.showToast({
      content: '请稍候···',
      duration: 3000
    }, function(){
      ap.alert('toast消失了');
    });
  });
</script>