微信小程序消息提示框[微信小程序消息提醒功能]优质

网友南续提问：微信小程序的消息通知页面

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

组件说明:

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

组件用法：

wxml

<!--index.wxml-->

<view class="content">

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

<view class="con-button">

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

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

</view>

</view>

复制代码

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;

}

复制代码

以上就是如何使用微信小程序的显示消息提示组件的全部内容了，大家都学会了吗?

关于《如何使用微信小程序的显示消息提示组件？》相关问题的解答初蝶小编就为大家介绍到这里了。如需了解其他软件使用问题，请持续关注国旅手游网软件教程栏目。