美文网首页
小程序loading加载和提示框

小程序loading加载和提示框

作者: WindyMing | 来源:发表于2018-07-13 15:33 被阅读1024次

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

1.在android和ios等移动设备,不免会发生一些网速很差的情况。

2.当然还有移动设备的千差万别,高端机到低端机成千上万种都不为过。那么在点击了某个事件,高端机可以迅速反应,而低端机反应较差,需要等待loading提示。

3.移动设备普及的今天,使用者从5-80岁,当用户不会使用需要弹出引导框等。

先看下效果:

下面开始介绍如何实现这些:

首先是wxml:

showModal

showBusy

showSuccess

DIYImage

接下来是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'

})

}

})

小程序loading加载和提示框 - CSDN博客

相关文章

网友评论

      本文标题:小程序loading加载和提示框

      本文链接:https://www.haomeiwen.com/subject/nutspftx.html