正在阅读：怎么使用微信小程序的显示消息提示组件？怎么使用微信小程序的显示消息提示组件？

　　本章节主要介绍了如何使用微信小程序的显示消息提示组件?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。

　　组件说明:

　　Toast是当用户点击某些组件时弹出来来的提示消息。Toast会帮助你创建和显示这些消息。Toast是一种简易的消息提示框。当视图显示给用户，在应用程序中显示为浮动。小程序即将废弃Toast组件，故这里介绍Toast的API：wx.showToast

　　组件用法：

　　wxml

　　<!--index.wxml-->

　　<viewclass="content">

　　<textclass="showfunc">Toast功能</text>

　　<viewclass="con-button">

　　<buttonclass="button-left"bindtap="showToast">展示Toast</button>

　　<buttonclass="button-right"bindtap="hideToast">隐藏Toast</button>

　　</view>

　　</view>

　　复制代码

　　js

　　Page({

　　showToast:function(){

　　varthat=this;

　　wx.showToast({

　　title:'成功',

　　icon:'success',

　　duration:2000,

　　success:that.flySuccess,

　　fail:that.flyFail,

　　complete:that.flyComplete

　　})

　　},

　　hideToast:function(){

　　varthat=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;

　　}

　　复制代码