小程序模板網(wǎng)

微信小程序之自定義toast實(shí)例

發(fā)布時(shí)間:2018-04-14 14:36 所屬欄目:小程序開(kāi)發(fā)教程

作者:michael_ouyang,來(lái)自授權(quán)地址 
微信提供了一個(gè)toast的api wx.showToast() 
相關(guān)連接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

本來(lái)是比較好的,方便使用,但是這個(gè)toast會(huì)顯示出圖標(biāo),而且不能去除。 
假設(shè):我們執(zhí)行完業(yè)務(wù)的時(shí)候,toast一下,當(dāng)執(zhí)行成功的時(shí)候,效果還可以接受,如下圖: 

但是,當(dāng)執(zhí)行失敗的時(shí)候,如下圖: 
失敗了,你還顯示個(gè)扣扣圖案,那到底是成功還是失????這肯定是不能接受的?!疚婺槨?nbsp;
若是給老板看到這種效果,又是一頓臭罵,程序猿的委屈哭 

下面介紹一個(gè)自定義的toast 
效果: 

具體實(shí)現(xiàn): 
wxml:

 

  1. <!--按鈕-->
  2. <view style="{{isShowToast?'position:fixed;':''}}">
  3. <view class="btn" bindtap="clickBtn">button</view>
  4. </view>
  5.  
  6. <!--mask-->
  7. <view class="toast_mask" wx:if="{{isShowToast}}"></view>
  8. <!--以下為toast顯示的內(nèi)容-->
  9. <view class="toast_content_box" wx:if="{{isShowToast}}">
  10. <view class="toast_content">
  11. <view class="toast_content_text">
  12. {{toastText}}
  13. </view>
  14. </view>
  15. </view>

wxss:

 

  1. Page {
  2. background: #fff;
  3. }
  4. /*按鈕*/
  5. .btn {
  6. font-size: 28rpx;
  7. padding: 15rpx 30rpx;
  8. width: 100rpx;
  9. margin: 20rpx;
  10. text-align: center;
  11. border-radius: 10rpx;
  12. border: 1px solid #000;
  13. }
  14. /*mask*/
  15. .toast_mask {
  16. opacity: 0;
  17. width: 100%;
  18. height: 100%;
  19. overflow: hidden;
  20. position: fixed;
  21. top: 0;
  22. left: 0;
  23. z-index: 888;
  24. }
  25. /*toast*/
  26. .toast_content_box {
  27. display: flex;
  28. width: 100%;
  29. height: 100%;
  30. justify-content: center;
  31. align-items: center;
  32. position: fixed;
  33. z-index: 999;
  34. }
  35. .toast_content {
  36. width: 50%;
  37. padding: 20rpx;
  38. background: rgba(0, 0, 0, 0.5);
  39. border-radius: 20rpx;
  40. }
  41. .toast_content_text {
  42. height: 100%;
  43. width: 100%;
  44. color: #fff;
  45. font-size: 28rpx;
  46. text-align: center;
  47. }

js:

 

  1. Page({
  2. data: {
  3. //toast默認(rèn)不顯示
  4. isShowToast: false
  5. },
  6. showToast: function () {
  7. var _this = this;
  8. // toast時(shí)間
  9. _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
  10. // 顯示toast
  11. _this.setData({
  12. isShowToast: true,
  13. });
  14. // 定時(shí)器關(guān)閉
  15. setTimeout(function () {
  16. _this.setData({
  17. isShowToast: false
  18. });
  19. }, _this.data.count);
  20. },
  21. /* 點(diǎn)擊按鈕 */
  22. clickBtn: function () {
  23. console.log("你點(diǎn)擊了按鈕")
  24. //設(shè)置toast時(shí)間,toast內(nèi)容
  25. this.setData({
  26. count: 1500,
  27. toastText: 'Michael’s Toast'
  28. });
  29. this.showToast();
  30. }
  31. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23375.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢