微信提供了两种方式的交互反馈 toast:
第一种是微信api中的wx.showToast(OBJECT)方法。
具体用法是:wx.showToast({
title: '成功',
icon: 'loading',
duration: 2000
})
title: '成功',
icon: 'loading',
duration: 2000
})
title
提示的内容
icon 图标,有效值 "success", "loading"
duration 提示的延迟时间,单位毫秒,默认:1500
icon 图标,有效值 "success", "loading"
duration 提示的延迟时间,单位毫秒,默认:1500
出来上述三个参数外还有以下可选参数
image
自定义图标的本地路径,image 的优先级高于 icon
mask 是否显示透明蒙层,防止触摸穿透,默认:false
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数(调用成功、失败都会执行)
mask 是否显示透明蒙层,防止触摸穿透,默认:false
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数(调用成功、失败都会执行)
第二种是wxapp组件形式js控制完成。
具体用法是:
wxml页内容
<toast hidden="{{toastHidden}}" duration="2000" bindchange="toastChange" icon="warn">
{{toastmes}}
</toast>
<button type="default" bindtap="toastTap">点击弹出toast</button>
{{toastmes}}
</toast>
<button type="default" bindtap="toastTap">点击弹出toast</button>
icon
图标,
有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
duration hidden设置false后,触发bindchange的延时,单位毫秒默认1500
duration hidden设置false后,触发bindchange的延时,单位毫秒默认1500
bindchange
duration延迟后
触发
js页内容
Page({
data: {
toastHidden:true,
toastmes:''
},
toastTap:function(e){
this.setData({
toastHidden:false,
toastmes:"内容"
});
}
toastChange:function(e){
this.setData({
toastHidden:true,
});
},
})
data: {
toastHidden:true,
toastmes:''
},
toastTap:function(e){
this.setData({
toastHidden:false,
toastmes:"内容"
});
}
toastChange:function(e){
this.setData({
toastHidden:true,
});
},
})