九: 操作提示(js版本)
/* ---page/test/test.wxml----*/ < button bindtap = "binToast" >toast< button /> /* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/ Page({ binToast: function (){ wx.showToast({ title: '成功' , icon: 'success' , duration: 2000 }) }, }) /* ---page/test/test.js----*/ |
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
title | String | 是 | 提示的内容 |
icon | String | 否 | 图标,只支持"success"、"loading" |
duration | Number | 否 | 提示的延迟时间,单位毫秒,默认:1500, 最大为10000 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
如果是wxml的写法 那么loading和toast会写两个标签 其实他们使用的方法都是一样的。。所以那种写法很难受。不过js的这种写法很好的解决了这个问题。来看一下loading
/* ---page/test/test.wxml----*/ < button bindtap = "binLoading" >binLoading< button /> /* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/ Page({ binLoading: function (){ wx.showToast({ title: '加载中' , icon: 'loading' , duration: 10000 }) setTimeout( function (){ wx.hideToast() },2000) }, }) /* ---page/test/test.js----*/ |
可以看到这个方法。。。虽然给了duration:10000毫秒后自动消失的属性,可是用了一个用setTimeout来控制时间2秒后关闭 toast 。所以时间就不用等10秒那么麻烦了。
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
title | String | 是 | 提示的标题 |
content | String | 是 | 提示的内容 |
showCancel | Boolean | 否 | 是否显示取消按钮,默认为 true |
cancelText | String | 否 | 取消按钮的文字,默认为"取消",最多 4 个字符 |
cancelColor | HexColor | 否 | 取消按钮的文字颜色,默认为"#000000" |
confirmText | String | 否 | 确定按钮的文字,默认为"确定",最多 4 个字符 |
confirmColor | HexColor | 否 | 确定按钮的文字颜色,默认为"#3CC51F" |
success | Function | 否 | 接口调用成功的回调函数,返回res.confirm为true时,表示用户点击确定按钮 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
/* ---page/test/test.wxml----*/ < button bindtap = "bindModal" >Modal< button /> /* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/ Page({ bindModal: function (){ wx.showModal({ title: '提示' , content: '这是一个模态弹窗' , success: function (res) { if (res.confirm) { console.log( '用户点击确定' ) } } }) }, }) /* ---page/test/test.js----*/ |
需要注意的就是success毁掉函数的 res.confirm了 当为true的时候 则表示用户点击了确定。
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
itemList | String Array | 是 | 按钮的文字数组,数组长度最大为6个 |
itemColor | HexColor | 否 | 按钮的文字颜色,默认为"#000000" |
success | Function | 否 | 接口调用成功的回调函数,详见返回参数说明 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
/* ---page/test/test.wxml----*/ < button bindtap = "bindActionSheet" >ActionSheet< button /> /* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/ Page({ bindActionSheet: function (){ wx.showActionSheet({ itemList: [ 'A' , 'B' , 'C' ], success: function (res) { if (!res.cancel) { console.log(res.tapIndex) } } }) }, }) /* ---page/test/test.js----*/ |
这里则跟wxml完全不一样 。这里则是利用res.tapIndex 来获取 用户选的是那个选项。而且也不用像wxml那么麻烦每次还要手动去隐藏。。不过看需求。有利也有弊。
九: 操作提示(js版本)的更多相关文章
- 利用n 升级工具升级Node.js版本及在mac环境下的坑
一.利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了.这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想 ...
- [Effective JavaScript笔记]第1条:了解使用的js版本
1997年 正式成为国际标准,官方名称为ECMAScript. 1999年 定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年 发布第5版即ES5,引入了一些新特性,标准 ...
- Mac下nvm管理node.js版本问题
本篇文章主要是针对已经安装了node.js和nvm管理工具小伙伴遇到的问题. 管理工具有两个,一个是nvm,还有一个是nnvm的好处就是可以管理多个node版本,而且可以切换想要的版本,可以安装一个稳 ...
- Git 学习(四)操作修改和版本穿梭
Git 学习(四)操作修改和版本穿梭 之前的章节,已介绍了本地Git库创建.暂存区增.删.改,以及提交版本库:可回顾下命令操作: git add 和 git commit. 光有之前章节的操作,Git ...
- 构建工具是如何用 node 操作 html/js/css/md 文件的
构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...
- 使用RevitNet操作多个版本的Revit
在Revit二次开发中,如果只是简单的从模型中提取数据或不需要界面对Revit进行修改,我们一般使用RevitNet. 如果对RevitNet不熟悉的,请参考:RevitAPI进阶之独立进程内读取.写 ...
- 升级xcode8之后出现报错提示,提示swift版本问题
最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...
- 【转】javascript浏览器参数的操作,js获取浏览器参数
原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
随机推荐
- django系列6--Ajax01 特点, 基本格式, 向前端发送数据
一.Ajax了解 AJAX(Asynchronous Javascript And XML)优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 优点: 1.ajax使用Java ...
- JAVA Double去掉科学计数"E"
当Double的值很大时,显示的结果会变成带E的科学计数法显示,在报表的数据显示的时候不方便阅读,需要去掉E,将原数据显示 public static void main(String[] args) ...
- 《快学Scala》第一章 基础
- centos和ubuntu的网络属性配置
一. centos的网络配置 1. 修改 /etc/sysconfig/network-scripts/ifcfg-IFACE: DEVICE:此配置文件应用到 ...
- Python3之urllib模块
简介 urllib是python的一个获取url(Uniform Resource Locators,统一资源定位符),可以用来抓取远程的数据. 常用方法 (1)urlopen urllib.requ ...
- shell-009:删除字母
把一个文件里的前100行中有字母的行删除:再把101-200行的字母去掉 #!bin/bashsed '101.200s/[a-zA-Z]//g' filesed -n '1.100'p file | ...
- java 字符串(String)常用技巧及自建方法模块汇总
1.String类常用方法汇总 (1)删除字符串的头尾空白符 public String trim() (2)从指定位置截取字符串 public String substring(int beginI ...
- (转)错误"因为数据库正在使用,所以无法获得对数据库的独占访问权"的解决方案
引发原因:是因为我在还原数据库的时候,还有其他的用户正在使用数据库,所以就会出现以上提示. 解决方法:1,设置数据库在单用户模式下工作.设置方法:在需要还原的数据库上右击,在右键菜单命令上选择&quo ...
- ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法
1.ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...
- 【数组】Subsets
题目: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset ...