微信提供了一个土司的api wx.showToast ()
相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html # wxshowtoastobject
本来是比较好的,方便使用,但是这个烤面包会显示出图标,而且不能去除。
假设:我们执行完业务的时候,面包一下,当执行成功的时候,效果还可以接受,如下图:
, 
但是,当执行失败的时候,如下图:
失败了,你还显示个扣扣图案,那到底是成功还是失败? ?这肯定是不能接受的。
若是给老板看到这种效果,又是一顿臭骂,程序猿的委屈
下面介绍一个自定义的吐司
效果:
,
具体实现:
wxml:
& lt; !——按钮——比;
& lt;视图比;
& lt;视图类=癰tn bindtap”=癱lickBtn”祝辞button
& lt;/view>
& lt; !——面具比;
& lt;视图类=皌oast_mask”天气:如果=" {{isShowToast}} "祝辞& lt;/view>
& lt; !——以下为土司显示的内容——比;
& lt;视图类=皌oast_content_box”天气:如果=皗{isShowToast}}”比;
& lt;视图类=皌oast_content”比;
& lt;视图类=皌oast_content_text”比;
{{toastText}}
& lt;/view>
& lt;/view>
& lt;/view>
之前
wxs:
页面{
背景:# fff;
}/*按钮*/.btn {
字体大小:28 rpx;
填充:15 rpx 30 rpx;
宽度:100 rpx;
保证金:20 rpx;
text-align:中心;
border - radius: 10 rpx;
边界:1 px固体# 000;
}/*屏蔽*/.toast_mask {
透明度:0;
宽度:100%;
高度:100%;
溢出:隐藏;
位置:固定;
上图:0;
左:0;
z - index: 888;
}/*吐司*/.toast_content_box {
显示:flex;
宽度:100%;
高度:100%;
justify-content:中心;
对齐项目:中心;
位置:固定;
z - index: 999;
}
.toast_content {
宽度:50%;
填充:20 rpx;
背景:rgba (0, 0, 0, 0.5);
border - radius: 20 rpx;
}
.toast_content_text {
高度:100%;
宽度:100%;
颜色:# fff;
字体大小:28 rpx;
text-align:中心;
}
之前
js:
页面({
数据:{//面包默认不显示
isShowToast:假
},
showToast:函数(){
var _this=;//烤面包时间
_this.data。数=方法(_this.data.count) & # 63;方法(_this.data.count): 3000;//显示吐司
_this.setData ({
isShowToast:没错,
});//定时器关闭
setTimeout(函数(){
_this.setData ({
isShowToast:假
});
},_this.data.count);
},/*点击按钮*/clickBtn:函数(){
console.log(“你点击了按钮”)//设置烤面包时间,烤面包内容
this.setData ({
数:1500
toastText:“迈克尔的面包”
});
this.showToast ();
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
