微信小程序实战之自定义toast（6）

微信小程序实战之自定义toast（6）

微信提供了一个toast的api  wx.showToast()

相关连接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

本来是比较好的，方便使用，但是这个toast会显示出图标，而且不能去除。

假设：我们执行完业务的时候，toast一下，当执行成功的时候，效果还可以接受，如下图：

但是，当执行失败的时候，如下图：

失败了，你还显示个扣扣图案，那到底是成功还是失败？？这肯定是不能接受的。

若是给老板看到这种效果，又是一顿臭骂，程序猿的委屈

下面介绍一个自定义的toast

效果：

具体实现：

wxml：

button

{{toastText}}

wxss：

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: cenhttp://ter;

position: fixed;

z-index: 999;

}

.toast_content {

width: 50%;

padding: 20rpx;

background: rgba(0, 0, 0, 0.5);

border-radius: 20rpx;

}

.toast_content_text {

height: 100%;

width: 100%;

color: #fff;

font-size: 28rpx;

text-align: center;

}

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();

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。