微信提供了一個toast的api wx.showToast()
相關(guān)連接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject
站在用戶的角度思考問題，與客戶深入溝通，找到湛江網(wǎng)站設(shè)計與湛江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋湛江地區(qū)。
本來是比較好的，方便使用，但是這個toast會顯示出圖標(biāo)，而且不能去除。
假設(shè)：我們執(zhí)行完業(yè)務(wù)的時候，toast一下，當(dāng)執(zhí)行成功的時候，效果還可以接受，如下圖：
但是，當(dāng)執(zhí)行失敗的時候，如下圖：
失敗了，你還顯示個扣扣圖案，那到底是成功還是失??？？這肯定是不能接受的。
若是給老板看到這種效果，又是一頓臭罵，程序猿的委屈
下面介紹一個自定義的toast
效果：
具體實現(xiàn)：
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: center;
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默認(rèn)不顯示
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,
});
// 定時器關(guān)閉
setTimeout(function () {
_this.setData({
isShowToast: false
});
}, _this.data.count);
},
/* 點擊按鈕 */
clickBtn: function () {
console.log("你點擊了按鈕")
//設(shè)置toast時間，toast內(nèi)容
this.setData({
count: 1500,
toastText: 'Michael's Toast'
});
this.showToast();
}
}) 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
