微信小程序 使用vant -ui 动态轻提示

app.json添加vant ui toast 依赖

   "van-toast": "@vant/weapp/toast/index"

效果1

.wxml

<van-toast id="custom-selector" />
<van-button type="primary" bind:tap="dynamicPromptInformation">动态更新提示van-button>

.js

import Toast from '@vant/weapp/toast/toast';

Page({
dynamicPromptInformation() {

  const toast = Toast.loading({
    duration: 0, // 持续展示 toast
    forbidClick: true,
    message: '倒计时 3 秒',
    selector: '#custom-selector',
  });
  
  let second = 3;
  const timer = setInterval(() => {
    second--;
    if (second) {
      toast.setData({
        message: `倒计时 ${second} 秒`,
      });
    } else {
      clearInterval(timer);
      Toast.clear();
    }
  }, 1000);
  
}
//====================================test end ===========================================

})

效果2

.wxml

<van-toast id="van-toast" />
<van-button type="primary" bind:tap="dynamicPromptInformation">动态更新提示van-button>

.js

Page({
returnCarRequest: function() {
  const  that = this;

  const toast = Toast.loading({
    duration: 0, // 持续展示 toast
    forbidClick: true,
    message: '还车中...',
    selector: '#custom-selector',
  });
  
  wx.request({
    url: 'http://127.0.0.1:8080/test/gettest', //仅为示例，并非真实的接口地址
    data: {},
    header: {
      'content-type': 'application/json' // 默认值
    },
    success (res) {
      console.log(res.data);
      // toast.setData({
      //   message: `还车成功`,
      //   duration: 2000,
      // });
      Toast.clear();
      Toast.success('还车成功');


    }
  });

  console.log("结束1");
}

})