八： 操做提示（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的寫法的確要多蛋疼有多蛋疼。並且還很麻煩。最重要的是。頁面還要畫出來。。以後隱藏。代碼並不美觀，我也是日了個大熊貓。