showToast闪烁
做了一套公司的小程序,真机测试的时候发现一个问题 showToast闪烁一下 就消失了。然后我首先想到的是 是不是hide了。然后去复检代码,结果如下:
从头开始捋一下执行的顺序就不难理解了,代码顺序 wx.showLoading() =>wx.hideLoading() => wx.showToast() , 最后的运行顺序为wx.showLoading() => wx.showToast() =>wx.hideLoading() ,受到最后hide的影响,闪烁一下就没了。既然问题找到,解决就不难了
- 思路 先执行hide 把showToast拿到最后去执行 *
1
2
3
4
5
6
7
8
9
10
11wx.showLoading();
wx.hideLoading();
setTimeout( () => {
wx.showToast({
title: '提示语',
icon: "none",
});
setTimeout( () =>{
wx.hideToast();
},2000)
},0);
错误代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25// 请求事件
requestEvent: function() {
wx.showLoading({
title: '正在加载中',
})
wx.request({
url: '',
success: function(res) {
wx.showToast({
title: '成功',
duration: 2000
})
},
fail: function() {
wx.showToast({
title: '失败',
duration: 2000
})
},
complete: function() {
wx.hideLoading() //***** 问题出在这儿 调用 onComplete 时,hideLoading 将弹框隐藏掉了
}
})
}
正确代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// 请求事件
requestEvent: function() {
wx.showLoading({
title: '正在加载中',
})
wx.request({
url: '',
success: function(res) {
wx.hideLoading()
wx.showToast({
title: '成功',
duration: 2000
})
},
fail: function() {
wx.hideLoading()
wx.showToast({
title: '失败',
duration: 2000
})
}
})
}