Home > WeChat Applet > Mini Program Development > Detailed introduction to the toast component of WeChat applet

Detailed introduction to the toast component of WeChat applet

高洛峰
Release: 2017-02-17 10:16:53
Original
1819 people have browsed it

This article mainly introduces the relevant information about the detailed introduction of the toast component of the WeChat applet. Friends who need it can refer to the

微信小程序 toast组件详细介绍

toast message prompt box, which can be used to prompt some Information, such as clearing the cache, gives users a friendly reminder! Or operate some requests and do not want the user to perform any operations. Toast can also be used because other operations are invalid when toast is displayed.

Main attributes:

微信小程序 toast组件详细介绍

wxml

<!--点击button触发toast-->
<button type="primary" bindtap="listenerButton">点击显示toast</button>
<!--toast消息框显示3秒,并绑定事件-->
<toast hidden="{{hiddenToast}}" duration="3000" bindchange="toastHidden" >OK!</toast>
Copy after login

##js

##
Page({
 data:{
 // text:"这是一个页面"
 hiddenToast: true
 },

/**
 * 监听button点击事件
 */
 listenerButton: function() {
  this.setData({
   hiddenToast: !this.data.hiddenToast
  })
 },
 /**
 * toast显示时间到时处理业务 
 */
 toastHidden:function(){
  this.setData({
   hiddenToast: true
  })
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})
Copy after login

For more detailed introduction to the toast component of the WeChat applet and related articles, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template