微信小程序开发之吐司toast(消息提示框)

做Android的时候对toast是很熟悉的.微信小程序开发中吐司也是重要的消息提示方式.

上代码:

1.index.wxml

toast是微信提供的组件,duration是延迟时间,单位毫秒.这里设置是1000ms.bindchange是事件.在index.js中触发事件即可。

<!--index.wxml-->

<toast hidden="{{toastHidden}}" duration="1000" bindchange="onToastChanged">

{{toastText}}

</toast>

2.index.js

先在data中定义参数,toastHidden(吐司是否显示),toastText(吐司文本),函数onToastChanged(),当toastHidden变化为时执行,也就是为false时置为true;不加函数吐司不会消失。

//index.js

//获取应用实例

var app = getApp()

Page( {

data: {

toastHidden: true, //吐司

toastText: '',//吐司文本

},

onToastChanged: function() {

this.setData( { toastHidden: !this.data.toastHidden });

},

onLoad: function() {

this.setData( {

toastHidden: false, //吐司

toastText: '我是吐司',//吐司文本

})

}

})

我是直接在页面初始化(onLoad:function)时执行,可根据自己需求赋值给toastHidden和toastText。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。