微信小程序自定义公用提示弹层

微信小程序自定义的toast样式比较单一，而且不一定符合每个人的需求。比如以下这几种或者其他样式

在小程序中实现上面的方法并不难，难点主要是如何实现像普通html中那样定义一个公用方法，然后每个页面都能复用。

下面具体说明如何实现上图中的提示样式

一、先上已经做好的项目结构，showToast文件夹即公用的提示文件，包含wxml, js，wxss三个文件

1. showToast.wxml

<template name="toast">
    <view class="toast-content-wrap" wx:if="{{isShowToast}}">
        <view class="toast-content">
            <i wx:if="{{iconToast!==''&&!imageToast}}" class="iconfont {{iconToast}}"></i>
            <image src="{{imageToast}}" class="toast-loading" wx:if="{{imageToast}}"></image>
            <view class="content-text">{{textToast}}</view>
        </view>
    </view>
</template>

 

2.showToast.wxss

.toast-content-wrap {
    display: flex;
    position: fixed;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.toast-content {
    height: 196rpx;
    width: 360rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #d2d2d2;
    background: rgba(0, 0, 0, 0.90);
    border-radius: 8px;
}

.toast-content .iconfont {
    margin-bottom: 30rpx;
    font-size: 60rpx;
}

.toast-content .content-text {
    font-size: 16px;
}

.toast-loading {
    width: 50 rpx;
    height: 50 rpx;
    margin-bottom: 30rpx;
}

3.showToast.js

let showAlert = {
    show: function(data) {
        var that = this;
        this.setData({
            '_toast_.isShowToast': true,
            '_toast_.iconToast': data.iconToast,
            '_toast_.imageToast': data.imageToast,
            '_toast_.textToast': data.textToast
        });

        if (data.imageToast !== 'loading.gif') {
            setTimeout(function() {
                that.setData({
                    '_toast_.isShowToast': false
                })
            }, 1500)
        }

        if (data.close === true) {
            that.setData({
                '_toast_.isShowToast': false
            })
        }
    }
}

function ShowAlert() {

    let pages = getCurrentPages();
    let curPage = pages[pages.length - 1];
    Object.assign(curPage, showAlert)
    curPage.showAlert = this;
    curPage.setData({
        '_toast_.isShowToast': false,
        '_toast_.iconToast': '',
        '_toast_.imageToast': '',
        '_toast_.textToast': ''
    })

    return this;
}

module.exports = {
    ShowAlert
}

 

4.字体图标 iconfont.wxss

@font-face {
  font-family: "iconfont";
  src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1519471650795') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1519471650795#iconfont') format('svg');
  /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-warning:before {
  content: "\e60c";
}

.icon-dui:before {
  content: "\e600";
}

.icon-cuo:before {
  content: "\e601";
}

 

和loading.gif

 

 

二、使用(需要特别注意import时引入的目录结构要正确，根据自己项目结构更改)

 1.在app.js(小程序公用js文件，可以通过getApp()方法获取app.js中的方法)中引入公用js，ShowAlert为提示公用对象

import {
    ShowAlert
}

from './resources/components/showToast/showToast';

App({
    ShowAlert,
    onLaunch: function () {}
})

2.在app.wxss中引入公用样式和字体图标

@import "resources/iconfont/iconfont.wxss";
@import "resources/components/showToast/showToast.wxss";

3.在要使用的wxml文件中引入showToast.wxml

<import src="../../resources/components/showToast/showToast.wxml" />

<template is="toast" data="{{..._toast_}}"/>

4.在要使用的js文件的onload方法中声明ShowAlert

onLoad: function (options) {
    let app = getApp();
    new app.ShowAlert();
}

5.在要使用的地方

//1.对错、警告字体图标，提示完会自动关闭
this.show({
    iconToast: 'icon-warning', // 对：icon-dui, 错：icon-cuo,警告：icon-warning
    textToast: '请输入手机号'
}) 
//2.loading.gif加载,加载完需要手动关闭
this.show({
    iconToast: '',
    imageToast: '../../images/loading.gif',
    textToast: '加载中'
})
//关闭
that.show({
    close: true
})

到这里就ok了

 

本文参考https://www.cnblogs.com/Jacky-MYD/articles/7372365.html