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

最新推荐文章于 2024-08-06 14:26:07 发布

LinWeiJ

最新推荐文章于 2024-08-06 14:26:07 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 toast 自定义控件仿android

本文链接：https://blog.youkuaiyun.com/LinWeiJ/article/details/78058472

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

9 篇文章

订阅专栏

本文介绍了如何在微信小程序中创建一个自定义的Toast控件，仿照Android样式。通过复制并集成特定的文件到项目的相应目录，可以方便地在各页面使用此Toast功能。详细步骤包括将.utils/toast文件夹导入、在wxss、wxml和js文件中添加代码，以及参考源码进行使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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