微信提供了一个toast的api wx.showToast()
相关连接:nofollow" target="_blank" href="https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject">https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject
本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除。
假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图:
但是,当执行失败的时候,如下图:
失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的。
若是给老板看到这种效果,又是一顿臭骂,程序猿的委屈
下面介绍一个自定义的toast
效果:
rush:xml;">
<view class="toast_mask" wx:if="{{isShowToast}}">
<view class="toastcontentBox" wx:if="{{isShowToast}}">
<view class="toast_content">
<view class="toast_content_text">
{{toastText}}
wxss:
rush:css;">
Page {
background: #fff;
}
/*按钮*/
.btn {
font-size: 28rpx;
padding: 15rpx 30rpx;
width: 100rpx;
margin: 20rpx;
text-align: center;
border-radius: 10rpx;
border: 1px solid #000;
}
/*mask*/
.toast_mask {
opacity: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 888;
}
/*toast*/
.toast_content_
Box {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: fixed;
z-index: 999;
}
.toast_content {
width: 50%;
padding: 20rpx;
background: rgba(0,0.5);
border-radius: 20rpx;
}
.toast_content_text {
height: 100%;
width: 100%;
color: #fff;
font-size: 28rpx;
text-align: center;
}
js:
rush:js;">
Page({
data: {
//toast
默认
不显示
isShowToast: false
},showToast: function () {
var _this = this;
// toast时间
_this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
//
显示toast
_this.setData({
isShowToast: true,});
// 定时器
关闭
setTimeout(function () {
_this.setData({
isShowToast: false
});
},_this.data.count);
},/* 点击按钮 */
clickBtn: function () {
console.log("你点击了按钮")
//设置toast时间,toast
内容
this.setData({
count: 1500,toastText: 'Michael's Toast'
});
this.showToast();
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/weapp/39906.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。