小程序loading加载和提示框

 为什么需要加载loading和提示框呢？

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'

})

}

})