小程序模板网

微信小程序--自定义Toast、延时执行

Toast样式可以根据需求自定义,本例中是圆形

 

				
  1. [html] view plain copy
  2. <!--按钮-->
  3. <view class="btn" bindtap="btn_toast">自定义Toast</view>
  4. <!--以下为toast显示的内容 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. * 页面的初始数据
  6. */
  7. data: {
  8. //toast默认不显示
  9. isShowToast: false
  10. },
  11. showToast: function () {
  12. var _this = this;
  13. // toast时间
  14. _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;
  15. // 显示toast
  16. _this.setData({
  17. isShowToast: true,
  18. });
  19. // 定时器关闭
  20. setTimeout(function () {
  21. _this.setData({
  22. isShowToast: false
  23. });
  24. }, _this.data.count);
  25. },
  26. /* 点击按钮 */
  27. btn_toast: function () {
  28. console.log("点击了按钮")
  29. //设置toast时间,toast内容
  30. this.setData({
  31. count: 1500,
  32. toastText: '自定义',
  33. toastText1: 'Toast'
  34. });
  35. this.showToast();
  36. },
  37. /**
  38. * 生命周期函数--监听页面加载
  39. */
  40. onLoad: function (options) {
  41.  
  42. },})

延时执行:

 

				
  1. [javascript] view plain copy
  2. setTimeout(function () {
  3. //要延时执行的代码
  4. }, 1000) //延迟时间 这里是1秒  


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23785.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询