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

最新推荐文章于 2024-08-28 07:49:42 发布

奋斗年轻人

最新推荐文章于 2024-08-28 07:49:42 发布

阅读量2.7k

点赞数

分类专栏：微信小程序文章标签：微信小程序

微信小程序专栏收录该内容

95 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用Toast组件进行消息提示。通过设置duration属性来控制Toast显示的时间，并利用bindchange事件来实现Toast的自动隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做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.

http://blog.csdn.net/qq_31383345