微信小程序開發之吐司toast(消息提示框)
做Android的時候對toast是很熟悉的.微信小程序開發中吐司也是重要的消息提示方式.上代碼:1.index.wxmltoast是微信提供的組件,duration是延遲時間,單位毫秒.這里設置是1000ms.bindchange是事件.在index.js中觸發事件 ...
做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。
