如何使用微信小程序的显示消息提示组件？
本章节主要介绍了如何使用微信小程序的显示消息提示组件?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。
组件说明:
Toast是当用户点击某些组件时弹出来来的提示消息。Toast会帮助你创建和显示这些消息。Toast是一种简易的消息提示框。当视图显示给用户，在应用程序中显示为浮动。小程序即将废弃Toast组件，故这里介绍Toast的API：wx.showToast
组件用法：
wxml
复制代码
js
Page({
showToast:function(){
var that=this;
wx.showToast({
title: \'成功\',
icon: \'success\',
duration: 2000,
success: that.flySuccess,
fail:that.flyFail,
complete:that.flyComplete
})
},
hideToast:function(){
var that=this;
wx.showToast({
title: \'加载中\',
icon: \'loading\',
duration: 10000,
success: that.loadingSuccess,
fail:that.loadingFail,
complete:that.loadingComplete
});
setTimeout(function(){
wx.hideToast()
},2000)
},
flySuccess:function(e){
console.log(e);
console.log("起飞成功！");
},
flyFail:function(e){
console.log(e);
console.log("起飞失败！")
},
flyComplete:function(e){
console.log(e);
console.log("起飞结束！")
},
loadingSuccess:function(e){
console.log(e);
console.log("加载成功！");
},
loadingFail:function(e){
console.log(e);
console.log("加载失败！")
},
loadingComplete:function(e){
console.log(e);
console.log("加载结束！")
}
})
复制代码
wxss
/**index.wxss**/
.con-button{
display: flex;
flex-direction: row;
padding-top: 10%;
}
.showfunc{
padding-top:10%;
display: block;
text-align: center;
color: green;
}
复制代码
以上就是如何使用微信小程序的显示消息提示组件的全部内容了，大家都学会了吗?
- 怎么在AutoCAD中查看全部的内容？
- 别弃我2026-08-03 00:31:12
- 如何在AutoCAD中选框选图形？在AutoCAD中选框选图形的方法
- 栗子2026-08-03 00:31:10
- 如何在AutoCAD中画箭头符号？
- 对味2026-08-03 00:30:52
- 怎么在AutoCAD中绘制三维立体室内图？
- 别认怂2026-08-03 00:30:48
- 怎么给AutoCAD中的3d图形填充颜色？
- 花心症2026-08-03 00:30:42
- 如何解决AutoCAD启动很慢的问题？
- 凉人心2026-08-03 00:30:38
- QQMac版如何修改备注？QQMac版修改备注的方法
- 留井2026-08-03 00:30:35
- QQ手机版怎么取消个性签名与空间同步？
- 何必等2026-08-03 00:30:31
- 如何在AutoCAD中设置底图？AutoCAD设置底图的方法
- 阑珊2026-08-03 00:30:31
- QQ手机版如何设置井柏然字体？设置井柏然字体的方法
- 棼谷2026-08-03 00:30:28
