八： 操做提示（wxml 即将废弃）

首先须要注意的是 wxml的这些属性将要被废弃，不过能够看两眼。不肯意看的能够看下一章节一样是操做回馈只不过是js版的哦。

 

1、action-sheet 操做菜单

从屏幕底下出来菜单。

这里不用w3c的代码了，他给的例子是闭包。麻烦并且新手很差理解。事实上真正写代码的时候，至少在这个地方不会用到闭包。

/* ---page/test/test.wxml----*/   < button  type = "default"  bindtap = "actionSheetTap" >弹出菜单选项</ button > < action-sheet  hidden = "{{actionSheetHidden}}"  bindchange = "actionSheetChange" >      < action-sheet-item  bindtap = "item1" >选项一</ action-sheet-item >      < action-sheet-item  bindtap = "item2" >选项二</ action-sheet-item >      < action-sheet-cancel  class = "cancel" >取消</ action-sheet-cancel > </ action-sheet >   /* ---page/test/test.wxml----*/

/* ---page/test/test.js----*/   Page({    data: {      actionSheetHidden:  true ,   //设置选项框是否显示    },    totoSheet:  function (){      //当选项卡隐藏则打开，打开时则隐藏      this .setData({        actionSheetHidden: ! this .data.actionSheetHidden      })    },    actionSheetTap:  function (e) {      this .totoSheet();    },    actionSheetChange:  function (e) {      this .totoSheet();    },    item1: function (){      console.log( "我是第一个选择项" );      this .totoSheet();    },    item2: function (){      console.log( "我是第二个选择项" );      this .totoSheet();    } })   /* ---page/test/test.js----*/

这里本身写了一个totoSheet方法。当我点击选项一的时候 它提示一段代码以后隐藏菜单。固然里面还能够写一些跳转页面的操做。要注意的就是action-sheet-cancel点击

不是自动隐藏 ，而是须要本身设置 binchange 属性的。

属性名	类型	默认值	说明
hidden	Boolean	true	是否隐藏
bindchange	EventHandle		点击背景或action-sheet-cancel按钮时触发change事件，不携带数据

2、modal 对话框

熟悉js+html的童鞋能够把他看做是一个增强版的 alert 。那么开始贴代码。由于没啥重点因此仍是贴 W3C的代码。

/* ---page/test/test.wxml----*/   < modal  title = "标题"  confirm-text = "confirm"  cancel-text = "cancel"  hidden = "{{modalHidden}}"  bindconfirm = "modalChange"  bindcancel = "modalChange" >      这是对话框一的内容。 </ modal >   < modal  class = "modal"  hidden = "{{modalHidden2}}"  no-cancel  bindconfirm = "modalChange2" >      < view > 没有标题没有蒙层没有肯定的modal </ view >      < view > 内容能够插入节点 </ view > </ modal >   < view  class = "btn-area" >      < button  type = "default"  bindtap = "modalTap" >点击弹出modal</ button >      < button  type = "default"  bindtap = "modalTap2" >点击弹出modal2</ button > </ view >   /* ---page/test/test.wxml----*/

/* ---page/test/test.js----*/   Page({    data: {      modalHidden:  true ,      modalHidden2:  true    },    modalTap:  function (e) {      this .setData({        modalHidden:  false      })    },    modalChange:  function (e) {      this .setData({        modalHidden:  true      })    },    modalTap2:  function (e) {      this .setData({        modalHidden2:  false      })    },    modalChange2:  function (e) {      this .setData({        modalHidden2:  true      })    }, })   /* ---page/test/test.js----*/

首先看一下 对话框一。。这里他的例子用了两个值。confirm-text 能够把他看做一个肯定按钮。而cancel-text按钮则能够看作取消。

bindconfirm 则能够看做 点击确认须要执行的方法。bindcancel则能够看作取消的执行方法。

在看 对话框二的 no-cancel 属性 证实这个对话框只有 一个确认按钮。则没有取消按钮。

属性名	类型	默认值	说明
title	String		标题
hidden	Boolean	false	是否隐藏整个弹窗
no-cancel	Boolean	false	是否隐藏cancel按钮
confirm-text	String	肯定	confirm按钮文字
cancel-text	String	取消	cancel按钮文字
bindconfirm	EventHandle		点击确认触发的回调
bindcancel	EventHandle		点击取消以及蒙层触发的回调

3、toast 消息提示框

他的做用也很简单 ， 好比用微信支付成功的时候都知道他会提示一个支付成功的框框，会有很好的用户体验。以及等等等等。

这里一样不用W3C的代码。

/* ---page/test/test.wxml----*/   < toast  hidden = "{{toast1}}"  bindchange = "toast1Change" >默认(1500毫秒消失)</ toast > < toast  hidden = "{{toast2}}"  duration = "500"  bindchange = "toast2Change" >500毫秒后消失</ toast >   < button  type = "default"  bindtap = "toast1Tap" >点击弹出默认toast</ button > < button  type = "default"  bindtap = "toast2Tap" >点击弹出设置duration的toast</ button >   /* ---page/test/test.wxml----*/

/* ---page/test/test.js----*/   Page({      data : {        toast1 :  true ,        toast2 :  true ,      },      toast1Tap :  function (){        this .setData({          toast1 :  false        })      },      toast2Tap :  function (){        this .setData({          toast2 :  false        })      },      toast1Change: function (){        this .setData({          toast1 :  true        })      },      toast2Change: function (){        this .setData({          toast2 :  true        })      }   })   /* ---page/test/test.js----*/

须要注意的是 bindchange这个属性。。当我点击button的时候。toast设置了显示。可是过了一段时间他并不消失。而当有了bindchange方法的时候。他过了一段时间会消失，

这相似于延迟执行。可是好麻烦 给个差评。

 

4、loading 加载。

/* ---page/test/test.wxml----*/   < loading  hidden = "{{hidden}}" >加载中...</ loading > < button  type = "default"  bindtap = "loadingTap" >点击弹出loading</ button >   /* ---page/test/test.wxml----*/

/* ---page/test/test.js----*/ Page({      data: {          hidden:  true      },      loadingTap:  function (){          this .setData({            hidden:  false          });          var  that =  this ;          setTimeout( function (){            that.setData({                hidden:  true            });              that.update();                 }, 3000);      } })   /* ---page/test/test.js----*/

属性名	类型	默认值	说明
hidden	Boolean	false	是否隐藏

虽然写了这么多，然并卵。即将被废弃。不过他的js版。和ionic1的一些操做回馈很像。。并且写起来也不是很难。。题外话，总感受wxapp和angular2和ionic1是三胞胎。

不过废弃也好。wxml的写法的确要多蛋疼有多蛋疼。并且还很麻烦。最重要的是。页面还要画出来。。以后隐藏。代码并不美观，我也是日了个大熊猫。