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

最新推荐文章于 2024-05-09 22:41:19 发布

紫金小飞侠

最新推荐文章于 2024-05-09 22:41:19 发布

阅读量815

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 ui javascript

本文链接：https://blog.csdn.net/yangshengwei230612/article/details/130764796

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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");
}

})