九：操作提示（js版本）

一、toast 消息提示框

他用到了一个wx.showToast(object) 这样一个方法。作用是显示提示框。

/* ---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

二、loading 加载

他用到了一个wx.hideToast()作用是隐藏提示框。我们展示了提示框之后。可以选择什么时候关掉他。。这样就起到了加载的作用。

/* ---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秒那么麻烦了。

其实可以把setTimeout 换成ajax 取值。这样等异步取值完之后在执行wx.hideToast()那么就形成了一个加载的样子。

三、modal 对话框

参数	类型	必填	说明
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的时候则表示用户点击了确定。

四、action-sheet 操作菜单

参数	类型	必填	说明
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那么麻烦每次还要手动去隐藏。。不过看需求。有利也有弊。

时间： 2024-10-18 05:47:49

九：操作提示（js版本）的相关文章

[Effective JavaScript笔记]第一条：了解使用的js版本

1997年正式成为国际标准,官方名称为ECMAScript. 1999年定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年发布第5版即ES5,引入了一些新特性,标准化了一些被支持了但没规范的特性.目前还未得到广泛支持,书中会特别说明一些条款和建议是否是特定于ES5的. (ES6,现在都出来了,但我是在看这本书,就不多说了,继续.) 如:const (ES5不支持但ES6是支持的就不多说这个啦,查ES6吧). js并不只针对浏览器WEB编程,现在还有NODEJS

更新Android SDK之后Eclipse提示ADT版本过低

参考文章:http://blog.sina.com.cn/s/blog_6f0c85e10100v6pv.html 多谢分享. 在更新SDK之后,进入Eclipse提示adt版本过低. 方案一:换最新版的Eclipse,这个我没试过. 方案二:修改 %android_home%\tools\lib目录下的“plugin.prop” 中的值. 提示我版本过低时,里面的值是在修改过后再进入Eclipse就能设置了更新Android SDK之后Eclipse提示ADT版本过低,布布扣,bubuk

快速排序（js版本）

快速排序的时间复杂度为:O(n*log2n),相比较其他O(n2)的排序算法,还是比较有优势的.原文参考在此处,因为本人对原文的一小段代码有点不理解,所以进行了小的修改. 1.基本思想:在数组的第一个或最后一个元素里选择一个,作为基准元素,也称中轴.通过排序,让中轴把数组分为俩部分,一部分比中轴小,一部分大.再用递归法同样的排序俩部分. 2.实例: 3.js代码 var arrayQuick = [7,9,4,8,2,24,54,12,32,11,2]; quick(arrayQuick,0,a

linux操作提示：“Can't open file for writing”或“operation not permitted”的解决办法

在linux上使用vi命令修改一个文件内容的时候,发现无法保存,每次写完使用":q!"命令可以正常退出但是使用":wq!"命令保存文件并退出时出现一下信息提示: E212: Can't open file for writing Press ENTER or type command to continue 出现这个错误的原因可能有两个: 1.当前用户的权限不足 2.此文件可能正被其他程序或用户使用. 一般错误原因都是前者,解决方案是在使用vi

js实现的文章输入检查与测速。(纯js版本)

朋友又提出一些需求.希望不要jquery .于是修改成js版本. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta n

Entity Framework底层操作封装V2版本（1）

因为同志们一直给我提建议说,以前发的版本有问题.所以经过了我这一年多的使用和扩展,现在方法基本稳定了.现在贴出来给大家使用: 首先上场的是数据库操作层: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Linq.Expressions; using System.Data.Objects.DataClasses; using System.Refl

Entity Framework底层操作封装V2版本（2）

这个类是真正的数据库操作类,上面的那个类只是调用了这个封装类的方法进行的操作 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Linq.Expressions; using System.Data.Entity; using System.Data.Linq; using System.Data.Objects; using System.Refl

Entity Framework底层操作封装V2版本（3）

现在是附加的,组合查询需要的扩展类.大家知道lanmda表达式的组合条件比较麻烦,所以就加了一样一个类,方便进行组合查询: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Linq.Expressions; namespace JFrame.AccessCommon { public static class PredicateExtensions

Entity Framework底层操作封装V2版本（4）

这个版本里面,因为涉及到了多库的操作,原有的系统方法不能做到这样的事情了.所以这里有了一点区别这个类的主要用作就是,连接字符串的作用,默认是指向默认配置里面的,但是你可以指向其他的连接 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Configuration; namespace JFrame.Dal { public class DataBa

Entity Framework底层操作封装V2版本（5）

这个框架到现在最大的变化马上就要出现了,哪就是对缓存的使用.因为系统经常要去读取数据库数据,但是大家知道,数据库的处理能力是有限的,所以对于一些数据量不大,但是又需要经常去读取的功能来说,更好的方法就是使用缓存. 上面4的方法是不适用缓存的 using System; using System.Collections.Generic; using System.Linq; using System.Text; using JFrame.AccessCommon; using System.Da

九： 操作提示（js版本）

九： 操作提示（js版本）的相关文章

九：操作提示（js版本）

九：操作提示（js版本）的相关文章