微信小程序 toast组件详细介绍
toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的
主要属性:
wxml
<!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--toast消息框显示3秒,并绑定事件--> <toast hidden="{{hiddenToast}}" duration="3000" bindchange="toastHidden" >OK!</toast>
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(){ // 页面关闭 } })
相关文章:
hello WeApp icon组件
Window text组件 switch组件
tabBar底部导航 progress组件 action-sheet
应用生命周期 button组件 modal组件
页面生命周期 checkbox组件 toast组件
模块化详 form组件详 loading 组件
数据绑定 input 组件 navigator 组件
View组件 picker组件 audio 组件
scroll-view组件 radio组件 video组件
swiper组件 slider组件 Image组件
相关推荐
-
微信小程序 Toast自定义实例详解
微信小程序 Toast自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx
-
微信小程序开发之toast等弹框提示使用教程
介绍 微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT) . 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) mask属性好像并没有起作用.有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒. 还有一个函数是wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,
-
微信小程序 toast 详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 toast 消息提示框 属性名 类型 默认值 说明 duration Float 1500 hidden设置false后,触发bindchange的延时,单位毫秒 hidden Boolean false 是否隐藏 bindchange EventHandle duration延时后触发 示例代码: <view class="
-
详解微信小程序开发之——wx.showToast(OBJECT)的使用
wx.showToast API是显示消息提示框的作用. 先让我们看一下官方的文档说明: 注意:其中的图标,只支持"success"."loading" 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分. 添加两个按钮,同事添加点击事件.再在按钮上添加navigator导航,链接到默
-
微信小程序开发之实现自定义Toast弹框
前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使
-
微信小程序实战之自定义toast(6)
微信提供了一个toast的api wx.showToast() 相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject 本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除. 假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图: 但是,当执行失败的时候,如下图: 失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的
-
微信小程序开发之toast提示插件使用示例
前言 3月28号微信更新了版本,showToast可以通过image参数修改默认icon了,最大时间也取消了. 以上两个更新实用很多,但icon还是无法去除.显示形式有点单一,无法自定义,可能后续更新会增加更多功能.下面来看看本文的详细内容: 下载文章下面的文件,放在根目录. 然后在app.js中引入js并添加到App中,如下: var wxToast = require('toast/toast.js') App({ wxToast , onLaunch: function () {} })
-
微信小程序 toast组件详细介绍
toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--toast消息框显示3秒,并绑定事件-->
-
微信小程序 modal组件详细介绍
modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button> <!--弹出框--> <modal title="退出应用" hidden="{{hiddenModal
-
微信小程序 http请求详细介绍
在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试
-
微信小程序 wx:key详细介绍
微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某
-
微信 小程序Demo导入详细介绍
微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入? Demo源代码(来自网络) 百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky) 360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327) demo导入方式: 打开"微信web开发者工具" -->添加项目-->填写AppID(随便填).项目名称(随便填),选择本地开发目录(Demo
-
微信小程序 Mustache语法详细介绍
微信小程序 Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick
-
微信小程序 闭包写法详细介绍
微信小程序 闭包写法 在入口处的 app.js 中定义了一个获取用户 OpenId 的函数,在微信的登录接口 wx.login 中发起网络请求.这个函数传入一个回调函数 cb getOpenIdData: function(cb) { var that = this //调用登录接口 wx.login({ success: function(res) { wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data:
-
微信小程序 自定义创建详细介绍
微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家. 微信小程序 自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话
-
微信小程序 自定义创建详细介绍
微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家. 微信小程序 自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话
-
微信小程序 Mustache语法详细介绍
微信小程序 Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick
随机推荐
- 让IIS支持WAP的设置方法
- ASP.NET MVC5网站开发之添加\删除\重置密码\修改密码\列表浏览管理员篇2(六)
- Zend Framework教程之Bootstrap类用法概述
- PHP开发微信支付的代码分享
- python虚拟环境virtualenv的安装与使用
- python连接MySQL、MongoDB、Redis、memcache等数据库的方法
- python绘图方法实例入门
- Mysql安装 Navicat 出现1044/1045错误的解决方法
- 关于火狐(firefox)及ie下event获取的两种方法
- Shell脚本逐行读取文本文件(不改变文本格式)
- SQL SERVER 文件和文件组
- 纯jQuery实现前端分页功能
- jquery垂直公告滚动实现代码
- 查看Java所支持的语言及相应的版本信息
- 使用js获取地址栏中传递的值
- C#文件加密方法汇总
- JavaWeb Spring注解Annotation深入学习
- smslib发短信实例代码(电脑发短信)
- 记录集内随机取记录的代码
- 网店办照试行 无本经营亮剑何方