推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 829|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(26) : 微信小程序之自定義toast實例

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:50:50 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

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

相關連接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

本來是比較好的,方便使用,但是這個toast會顯示出圖標,而且不能去除。

假設:我們執行完業務的時候,toast一下,當執行成功的時候,效果還可以接受,如下圖:

但是,當執行失敗的時候,如下圖:

失敗了,你還顯示個扣扣圖案,那到底是成功還是失敗??這肯定是不能接受的。【捂臉】

若是給老板看到這種效果,又是一頓臭罵,程序猿的委屈





下面介紹一個自定義的toast

效果:



具體實現:


wxml:

[html] view plain copy


  • <!--按鈕-->  
  • <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:

[css] view plain copy


  • 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:

[javascript] view plain copy


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



本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 好运快三人工计划大小 棒球比分网 安徽11选五开奖查询 正版平特一肖论坛 皇家网络在线棋牌 浙江麻将大厅 吉祥白城麻将下载安装 快3中奖查询表 广西快3计划软件 云南山水麻将安卓下载 熊猫打麻将 福建11选5官网