微信小程序 toast 详解及实例代码
微信小程序 开发文档,相关文章:
微信小程序 action-sheet
微信小程序 modal
微信小程序 toast
微信小程序 loading
微信小程序 toast
消息提示框
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
duration | Float | 1500 | hidden设置false后,触发bindchange的延时,单位毫秒 |
hidden | Boolean | false | 是否隐藏 |
bindchange | EventHandle | duration延时后触发 |
示例代码:
<view class="body-view"> <toast hidden="{{toast1Hidden}}" bindchange="toast1Change"> 默认 </toast> <button type="default" bindtap="toast1Tap">点击弹出默认toast</button> </view> <view class="body-view"> <toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change"> 设置duration </toast> <button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button> </view>
var toastNum = 2 var pageData = {} pageData.data = {} for (var i = 0; i <= toastNum; ++i) { pageData.data['toast'+i+'Hidden'] = true; (function (index) { pageData['toast'+index+'Change'] = function(e) { var obj = {} obj['toast'+index+'Hidden'] = true; this.setData(obj) } pageData['toast'+index+'Tap'] = function(e) { var obj = {} obj['toast'+index+'Hidden'] = false this.setData(obj) } })(i) } Page(pageData)
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
详解微信小程序开发之——wx.showToast(OBJECT)的使用
wx.showToast API是显示消息提示框的作用. 先让我们看一下官方的文档说明: 注意:其中的图标,只支持"success"."loading" 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分. 添加两个按钮,同事添加点击事件.再在按钮上添加navigator导航,链接到默
-
微信小程序 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弹框
前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使
-
微信小程序开发之toast提示插件使用示例
前言 3月28号微信更新了版本,showToast可以通过image参数修改默认icon了,最大时间也取消了. 以上两个更新实用很多,但icon还是无法去除.显示形式有点单一,无法自定义,可能后续更新会增加更多功能.下面来看看本文的详细内容: 下载文章下面的文件,放在根目录. 然后在app.js中引入js并添加到App中,如下: var wxToast = require('toast/toast.js') App({ wxToast , onLaunch: function () {} })
-
微信小程序实战之自定义toast(6)
微信提供了一个toast的api wx.showToast() 相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject 本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除. 假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图: 但是,当执行失败的时候,如下图: 失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的
-
微信小程序 toast组件详细介绍
toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--toast消息框显示3秒,并绑定事件-->
-
微信小程序 toast 详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 toast 消息提示框 属性名 类型 默认值 说明 duration Float 1500 hidden设置false后,触发bindchange的延时,单位毫秒 hidden Boolean false 是否隐藏 bindchange EventHandle duration延时后触发 示例代码: <view class="
-
微信小程序 action-sheet详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance
-
微信小程序 modal详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String 标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca
-
微信小程序 loading 详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 loading 属性名 类型 默认值 说明 hidden Boolean false 是否隐藏 示例代码: <view class="body-view"> <loading hidden="{{hidden}}"> 加载中... </loading> <butto
-
微信小程序 action-sheet详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance
-
微信小程序 modal详解及实例代码
微信小程序 开发文档,相关文章: 微信小程序 action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String 标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca
-
微信小程序 slider 详解及实例代码
微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
-
微信小程序 框架详解及实例应用
快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是
-
微信小程序 数据绑定详解及实例
微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定. >>>数据视图绑定 做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用
-
微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapter({ success: function(res) { wx.getBluetoothAdapterState({ success: function(res) { if (res.available) { if (res.discovering) { wx.stopBluetoothDevic
随机推荐
- 编程人员阅读代码的一些小技巧分享
- Python函数式编程
- sqlite循环批量插入数据采用批处理文件实现
- Keepalived+HAProxy实现MySQL高可用负载均衡的配置
- JavaScript高级程序设计(第3版)学习笔记5 js语句
- IOS 开发之数据存储writeToFile的应用实例
- php mssql 时间格式问题
- 用sql命令修改数据表中的一个字段为非空(not null)的语句
- php设计模式介绍之值对象模式第1/5页
- c++连接mysql5.6的出错问题总结
- C++中的RTTI机制详解
- MySQL show命令的用法
- JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
- js获取class的所有元素
- asp长文章用分页符来分页显示
- js parentElement和offsetParent之间的区别
- VBS下载文件的新方法
- C语言 解压华为固件的实例代码
- sqlserver自动增长列引起的问题解决方法
- javascript 仿开心网好友印象功能(点击文字弹出印象框)