小程序模板網(wǎng)

微信小程序--自定義Toast、延時(shí)執(zhí)行

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

Toast樣式可以根據(jù)需求自定義,本例中是圓形

 

				
  1. [html] view plain copy
  2. <!--按鈕-->
  3. <view class="btn" bindtap="btn_toast">自定義Toast</view>
  4. <!--以下為toast顯示的內(nèi)容 opacity為透明度-->
  5. <view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
  6. {{toastText}}
  7. </view>
  8. <view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
  9. {{toastText1}}
  10. </view>
 

				
  1. [css] view plain copy
  2. Page {
  3. background: #f9f9f9;
  4. }
  5. /*按鈕*/
  6. .btn {
  7. width: 20%;
  8. margin-left: 38%;
  9. margin-top: 100rpx;
  10. text-align: center;
  11. border-radius: 10rpx;
  12. border: 10px solid #f00;
  13. background: #f00;
  14. color: #fff;
  15. font-size: 22rpx;
  16. }
  17. /*toast*/
  18. .toast_box {
  19. width: 30%;
  20. height: 221rpx;
  21. margin-top: 60rpx;
  22. margin-left: 35%;
  23. text-align: center;
  24. border-radius: 166rpx;
  25. background: #f00;
  26. color: #fff;
  27. font-size: 32rpx;
  28. line-height: 220rpx;
  29. }
 

				
  1. [javascript] view plain copy
  2. Page({
  3.  
  4. /**
  5. * 頁(yè)面的初始數(shù)據(jù)
  6. */
  7. data: {
  8. //toast默認(rèn)不顯示
  9. isShowToast: false
  10. },
  11. showToast: function () {
  12. var _this = this;
  13. // toast時(shí)間
  14. _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;
  15. // 顯示toast
  16. _this.setData({
  17. isShowToast: true,
  18. });
  19. // 定時(shí)器關(guān)閉
  20. setTimeout(function () {
  21. _this.setData({
  22. isShowToast: false
  23. });
  24. }, _this.data.count);
  25. },
  26. /* 點(diǎn)擊按鈕 */
  27. btn_toast: function () {
  28. console.log("點(diǎn)擊了按鈕")
  29. //設(shè)置toast時(shí)間,toast內(nèi)容
  30. this.setData({
  31. count: 1500,
  32. toastText: '自定義',
  33. toastText1: 'Toast'
  34. });
  35. this.showToast();
  36. },
  37. /**
  38. * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  39. */
  40. onLoad: function (options) {
  41.  
  42. },})

延時(shí)執(zhí)行:

 

				
  1. [javascript] view plain copy
  2. setTimeout(function () {
  3. //要延時(shí)執(zhí)行的代碼
  4. }, 1000) //延遲時(shí)間 這里是1秒  


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