微信小程序 - 9.组件(toast、loading)

一、toast

toast

toast消息提示框，可用在提示一些信息，比如清楚缓存给用户一个友好的提示！或操作一些请求不想让用户有什么操作，toast也可以做到因为toast显示时其他操作是无效的

属性名	类型	默认值	说明
title	string		提示内容
icon	string	'success'	图标
image	string		自定义图标的本地路径 , image的优先级要高于icon
duration	Float	1500	提示的延迟时间
mask	Boolean	false	是否显示透明蒙层，防止触摸穿透
success	EventHandle		接口调用失败的回调函数
fail	EventHandle		hidden设置为false后 , 触发bindchange的延时 , 单位毫秒
complete	EventHandle		接口调用结束的回调函数（调用成功、失败都会执行）

icon的合法值

值	说明
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度
none	不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持

wx.showToast({
    title: '取消跳转',
    icon:'success'
})

二、loading

loading

loading通常使用在请求网络数据时的一种方式，通过hidden属性设置显示与否

属性名	类型	默认值	说明
title	string		提示内容
mask	Boolean	false	是否显示透明蒙层，防止触摸穿透
success	EventHandle		接口调用失败的回调函数
fail	EventHandle		hidden设置为false后 , 触发bindchange的延时 , 单位毫秒
complete	EventHandle		接口调用结束的回调函数（调用成功、失败都会执行）

toScrollPage:function(e){
    wx.showLoading({
        title: '正在跳转',
    })
    setTimeout(function () {
        wx.hideLoading()
        wx.navigateTo({
            url: '../scrollpage/scrollpage',
        })
    }, 2000)
},

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showLoading 应与 wx.hideLoading 配对使用