为什么需要加载loading和提示框呢?
1.在android和ios等移动设备,不免会发生一些网速很差的情况。
2.当然还有移动设备的千差万别,高端机到低端机成千上万种都不为过。那么在点击了某个事件,高端机可以迅速反应,而低端机反应较差,需要等待loading提示。
3.移动设备普及的今天,使用者从5-80岁,当用户不会使用需要弹出引导框等。
1.在android和ios等移动设备,不免会发生一些网速很差的情况。
2.当然还有移动设备的千差万别,高端机到低端机成千上万种都不为过。那么在点击了某个事件,高端机可以迅速反应,而低端机反应较差,需要等待loading提示。
3.移动设备普及的今天,使用者从5-80岁,当用户不会使用需要弹出引导框等。
先看下效果:
下面开始介绍如何实现这些:
首先是wxml:
<
view
class=
'body'>
<
button
style=
'margin-top:60rpx;width:80%'
bindtap=
'showModal'>showModal
</
button
>
<
button
style=
'margin-top:60rpx;width:80%'
bindtap=
'showBusy'>showBusy
</
button
>
<
button
style=
'margin-top:60rpx;width:80%'
bindtap=
'showSuccess'>showSuccess
</
button
>
<
button
style=
'margin-top:60rpx;width:80%'
bindtap=
'DIYImage'>DIYImage
</
button
>
</
view
>
接下来是js文件:
Page({
data: {
},
onLoad:
function () {
},
showModal:
function(){
wx.showModal({
title:
' ',
//标题(可为空或者省略)
content:
'是否删除当前数据',
confirmText:
'确定删除',
confirmColor:
'#333ccc',
cancelText:
'取消删除',
cancelColor:
'0f0f0f',
showCancel:
false,
//设置cancel是否展示
success:
function (res) {
if (res.confirm) {
console.log(
'确定')
}
else
if (res.cancel) {
console.log(
'取消')
}
}
})
},
showBusy:
function () {
wx.showToast({
title:
'加载中...',
mask:
true,
icon:
'loading'
})
},
showSuccess:
function () {
wx.showToast({
title:
'支付成功',
mask:
true,
icon:
'success'
})
},
DIYImage:
function(){
wx.showToast({
title:
'自定义logo',
mask:
true,
image:
'../../image/zy01.png',
//自定义图标(优先级>icon)
icon:
'success'
})
}
})