一、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那么麻烦每次还要手动去隐藏。。不过看需求。有利也有弊。

 
 

九: 操作提示(js版本)的更多相关文章

  1. 利用n 升级工具升级Node.js版本及在mac环境下的坑

    一.利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了.这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想 ...

  2. [Effective JavaScript笔记]第1条:了解使用的js版本

    1997年 正式成为国际标准,官方名称为ECMAScript. 1999年 定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年 发布第5版即ES5,引入了一些新特性,标准 ...

  3. Mac下nvm管理node.js版本问题

    本篇文章主要是针对已经安装了node.js和nvm管理工具小伙伴遇到的问题. 管理工具有两个,一个是nvm,还有一个是nnvm的好处就是可以管理多个node版本,而且可以切换想要的版本,可以安装一个稳 ...

  4. Git 学习(四)操作修改和版本穿梭

    Git 学习(四)操作修改和版本穿梭 之前的章节,已介绍了本地Git库创建.暂存区增.删.改,以及提交版本库:可回顾下命令操作: git add 和 git commit. 光有之前章节的操作,Git ...

  5. 构建工具是如何用 node 操作 html/js/css/md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  6. 使用RevitNet操作多个版本的Revit

    在Revit二次开发中,如果只是简单的从模型中提取数据或不需要界面对Revit进行修改,我们一般使用RevitNet. 如果对RevitNet不熟悉的,请参考:RevitAPI进阶之独立进程内读取.写 ...

  7. 升级xcode8之后出现报错提示,提示swift版本问题

    最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...

  8. 【转】javascript浏览器参数的操作,js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

  9. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  10. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

随机推荐

  1. django系列6--Ajax01 特点, 基本格式, 向前端发送数据

    一.Ajax了解 AJAX(Asynchronous Javascript And XML)优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 优点: 1.ajax使用Java ...

  2. JAVA Double去掉科学计数"E"

    当Double的值很大时,显示的结果会变成带E的科学计数法显示,在报表的数据显示的时候不方便阅读,需要去掉E,将原数据显示 public static void main(String[] args) ...

  3. 《快学Scala》第一章 基础

  4. centos和ubuntu的网络属性配置

        一. centos的网络配置    1.  修改 /etc/sysconfig/network-scripts/ifcfg-IFACE:             DEVICE:此配置文件应用到 ...

  5. Python3之urllib模块

    简介 urllib是python的一个获取url(Uniform Resource Locators,统一资源定位符),可以用来抓取远程的数据. 常用方法 (1)urlopen urllib.requ ...

  6. shell-009:删除字母

    把一个文件里的前100行中有字母的行删除:再把101-200行的字母去掉 #!bin/bashsed '101.200s/[a-zA-Z]//g' filesed -n '1.100'p file | ...

  7. java 字符串(String)常用技巧及自建方法模块汇总

    1.String类常用方法汇总 (1)删除字符串的头尾空白符 public String trim() (2)从指定位置截取字符串 public String substring(int beginI ...

  8. (转)错误"因为数据库正在使用,所以无法获得对数据库的独占访问权"的解决方案

    引发原因:是因为我在还原数据库的时候,还有其他的用户正在使用数据库,所以就会出现以上提示. 解决方法:1,设置数据库在单用户模式下工作.设置方法:在需要还原的数据库上右击,在右键菜单命令上选择&quo ...

  9. ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法

    1.ifram的使用 左边是<a>链接  右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...

  10. 【数组】Subsets

    题目: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset ...