微信小程序自定义控件--toast(仿Android)

关注

原创最新推荐文章于 2026-03-03 03:28:32 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

微信小程序中使用 Vant Weapp UI 框架实现 Toast 弹窗为了提供更好的用户反馈和提示，我们可以使用 Vant Weapp UI 框架中的 Toast 组件来实现简洁美观的弹窗效果。选择 “项目” 菜单下的 “导入项目” 选项，将刚才解压缩得到的 “vant-weapp” 文件夹作为项目目录导入。在上述代码中，我们通过 require 方法引入了 Toast 组件，并在 showToast 方法中调用 Toast 函数显示一条提示信息。至此，我们已经成功引入了 Vant Weapp UI 框架，并使用 Toast 组件在微信小程序中展示提示信息。阅读详情

github 地址：https://github.com/LinweiJ/wega_weapp

有用的话,随手给课心吧!

一.toast

1.将/utils/toast文件夹copy到根目录下的utils

2.copy以下代码到所需page目录xxx.wxss,或者多个页面使用,直接导入app.wxss 全局都可使用(建议)

/* 导入toast样式 */
@import "utils/toast/toast.wxss";

3.copy以下代码到所需page目录xxx.wxml

<!-- toast 提示框 -->
<include src="../../utils/toast/toast.wxml" />

4.copy以下代码到所需page目录xxx.js

/**
 * toast提示框
 */
var toast = require('../../utils/toast/toast.js');

5.使用

//全屏可点击 默认1500ms 类似android toast
toast.showToastDefault(page, toastText)
//全屏不可点击 默认 2000ms
toast.showToastWithMask(page, toastText)
//可定制 
toast.showToast(page, toastText, count, isShowMask)
//参数
page:页面
toastText:提示文字
count:显示时间
isShowMask:是否显示蒙层

6.参考

更多细节参考wega_weapp/pages/toast_demo/

7.源码

toast.js

// toast.js

/**
 * 显示toast 默认3000ms
 */
function showToast(page, toastText, count, isShowMask) {

  // toast时间  
  count = parseInt(count) ? parseInt(count) : 3000;

  page.setData({
    //设置toast时间，toast内容  
    count: count,
    toastText: toastText,
    // 显示toast  
    isShowToast: true,
    isShowMask: isShowMask,
  });

  // 定时器关闭  
  setTimeout(function () {
    page.setData({
      isShowToast: false,
      isShowMask: false
    });
  }, count);
}

/**
 * 显示toast 默认1500ms 
 */
function showToastDefault(page, toastText) {
  this.showToast(page, toastText, 1500, false);
}

/**
 * 全屏不可点击 显示toast 默认2000ms 
 */
function showToastWithMask(page, toastText) {
  this.showToast(page, toastText, 2000, true);
}

module.exports = {
  showToast: showToast,
  showToastDefault: showToastDefault,
  showToastWithMask: showToastWithMask
}

toast.wxml

<!--toast.wxml-->

<!--mask 背景-->
<view class="toast_mask" wx:if="{{isShowMask}}"></view>
<!--以下为toast显示的内容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
  <view class="toast_content" wx:if="{{isShowToast}}">
    <view class="toast_content_text">
      {{toastText}}
    </view>
  </view>
</view>

toast.wxss

/* toast.wxss */

/* mask 背景  */

.toast_mask {
  /* opacity: 0.5; */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  z-index: 888;
  background: rgba(0, 0, 0, 0.2);
}

/*toast 盒子*/

.toast_content_box {
  display: flex;
  width: 100%;
  bottom: 0;
  left: 0;
  align-items: center;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  z-index: 999;
  margin-bottom: 300rpx;
}

/*toast 内容*/

.toast_content {
  padding: 12rpx 30rpx;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
}

/*toast 内容文字*/

.toast_content_text {
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 12px;
  text-align: center;
}