微信小程序自定义的toast样式比较单一,而且不一定符合每个人的需求。比如以下这几种或者其他样式
在小程序中实现上面的方法并不难,难点主要是如何实现像普通html中那样定义一个公用方法,然后每个页面都能复用。
下面具体说明如何实现上图中的提示样式
1. showToast.wxml
{{textToast}}
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
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
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