微信小程序--自定义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秒