小程序——自定义toast

1. 新建一个common的文件，在common文件中创建showToast

showToast.js文件
{
  "component": true,
  "usingComponents": {}
}


showToast.wxml 文件

<template name="showToast">
  <block wx:if="{{showToast.isShow? showToast.isShow: false}}">
    <view class="toast-bg" wx:if="{{showToast.mask==false? false : true}}"></view>
    <view class="toast-center">
      <view class="toast">
        <image class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />
        <text class="toast-text">{{showToast.title}}</text>
      </view>
    </view>
  </block>
</template>


showToast.wxss 文件

.toast-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
}
/*水平居中样式*/
.toast-center {
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
}
.toast {
  display: inline-block;
  padding: 20rpx 40rpx;
  max-width: 600rpx;
  font-size: 28rpx;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border-radius: 10rpx;
  text-align: center;
}

/*垂直居中*/
.toast-center::after{
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.toast .toast-icon {
  display: block;
  margin: 0 auto 10rpx auto;
  width: 50rpx;
  height: 50rpx;
}


showToast.js文件
/*
显示toast提示
title:    提示的内容 必填
icon:     图标，//请指定正确的路径，选填
duration: 提示的延迟时间，单位毫秒，默认：1500, 10000永远存在除非手动清除 选填
mask:     是否显示透明蒙层，防止触摸穿透，默认：true 选填
cb:       接口调用成功的回调函数 选填
 */
function showToast(obj) {
  if (typeof obj == 'object' && obj.title) {
    if (!obj.duration || typeof obj.duration != 'number') { obj.duration = 1500; }//默认1.5s后消失
    var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例
    obj.isShow = true;//开启toast
    if (obj.duration < 10000) {
      setTimeout(function () {
        obj.isShow = false;
        obj.cb && typeof obj.cb == 'function' && obj.cb();//如果有成功的回调则执行
        that.setData({
          'showToast.isShow': obj.isShow
        });
      }, obj.duration);
    }
    that.setData({
      showToast: obj
    });
  } else {
    console.log('showToast fail:请确保传入的是对象并且title必填');
  }
}
/**
 *手动关闭toast提示
 */
function hideToast() {
  var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例
  if (that.data.showToast) {
    that.setData({
      'showToast.isShow': false
    });
  }
}
module.exports = {
  showToast: showToast,
  hideToast: hideToast
}

2.在所需要的文件中引入

2.1 js文件

var feedbackApi = require('../../common/showToast/showToast.js');

feedbackApi.showToast({

title: '类型不能为空，请填写',

icon: '/images/others/tishi_cuo.png'

})

 

2.2wxml文件

<import src="../../common/showToast/showToast.wxml" />

<template is="showToast" data="{{showToast: showToast}}" />

 

2.3wxss文件

@import '../../common/showToast/showToast.wxss';