|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要為大家詳細介紹了微信小程序實戰之自定義toast的相關方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下微信提供了一個toast的api wx.showToast()本來是比較好的,方便使用,但是這個toast會顯示出圖標,而且不能去除。 假設:我們執行完業務的時候,toast一下,當執行成功的時候,效果還可以接受,如下圖: 但是,當執行失敗的時候,如下圖: 失敗了,你還顯示個扣扣圖案,那到底是成功還是失敗??這肯定是不能接受的。 若是給老板看到這種效果,又是一頓臭罵,程序猿的委屈
下面介紹一個自定義的toast 效果:
具體實現: <!--按鈕-->
<view style="{{isShowToast?'position:fixed;':''}}">
<view class="btn" bindtap="clickBtn">button</view>
</view>
<!--mask-->
<view class="toast_mask" wx:if="{{isShowToast}}"></view>
<!--以下為toast顯示的內容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
<view class="toast_content">
<view class="toast_content_text">
{{toastText}}
</view>
</view>
</view>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默認不顯示
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();
}
})以上就是微信小程序之自定義toast實例詳解的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!