1.  動(dòng)作表單（ActionSheet）

iOS 程序員一定對(duì) ActionSheet 非常熟悉，這是 Cocoa Touch 很常用的 UI 組件。使用 ActionSheet 會(huì)從當(dāng)前窗口底部往上彈出一個(gè)窗口，可以在該窗口放置任何組件，例如，如圖 1 所示的一排按鈕。

圖1  ActionSheet的效果

圖 1 是小程序 ActionSheet 的效果，與 iOS ActionSheet 的效果類似。在小程序中使用 ActionSheet 要使用  標(biāo)簽，該標(biāo)簽中可以包含任意的組件，因此，可以在 ActionSheet 上放置任何小程序支持的 UI 元素。例如，下面的布局代碼放置了 4 個(gè)普通按鈕和一個(gè)“取消”按鈕，效果就是圖 1 所示的樣式。

<view style="margin:30px">
  <button type="default" bindtap="actionSheetTap">彈出action sheetbutton>
  <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
    <block wx:for-items="{{actionSheetItems}}">
      <action-sheet-item bindtap="bindItem{{index+1}}">{{item}}action-sheet-item>
    block>
    <action-sheet-cancel>取消action-sheet-cancel>
  action-sheet>
view>

在這段代碼中，使用  動(dòng)態(tài)生成了 4 個(gè)  標(biāo)簽，這 4 個(gè)標(biāo)簽分別通過 bindtap 屬性指定了 4 個(gè)用于響應(yīng) item 點(diǎn)擊事件的函數(shù)（ bindItem1 、 bindItem2 、 bindItem3 和 bindItem4 ）。在循環(huán)的外面使用  標(biāo)簽添加了一個(gè)“取消”按鈕，點(diǎn)擊“取消”按鈕，無需加任何 JavaScript 代碼就會(huì)關(guān)閉 ActionSheet 。

通過  標(biāo)簽的 hidden 屬性可以控制 ActionSheet 的顯示和隱藏，該屬性值為 true ，表示隱藏 ActionSheet ，為 false ，表示顯示 ActionSheet 。通過 bindchange 屬性指定一個(gè)事件函數(shù)，當(dāng)點(diǎn)擊“取消”按鈕或 ActionSheet 外部區(qū)域，會(huì)調(diào)用該函數(shù)，通常在該函數(shù)中隱藏 ActionSheet 。

下面是完整的 JavaScript 實(shí)現(xiàn)代碼。

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
  data: {
    actionSheetHidden: true,
    actionSheetItems: items
  },
  //  用于顯示和隱藏ActionSheet
  actionSheetTap: function (e) {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  //  點(diǎn)擊“取消”按鈕或ActionSheet的外部區(qū)域，會(huì)調(diào)用該函數(shù)
  actionSheetChange: function (e) {
    console.log('actionSheetChange')
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem1: function (e) {
    console.log("單擊了item1");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem2: function (e) {
    console.log("單擊了item2");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem3: function (e) {
    console.log("單擊了item3");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  bindItem4: function (e) {
    console.log("單擊了item4");
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  }
}
Page(pageObject)

顯示 ActionSheet 后，當(dāng)點(diǎn)擊“取消”按鈕或 ActionSheet 外部區(qū)域，會(huì)在 Console 中輸出如圖 2 所示的日志信息。然后 ActionSheet 會(huì)隱藏（因?yàn)?/span> actionSheetHidden 變量被設(shè)為 true ）。

圖2  點(diǎn)擊“取消”按鈕輸出的日志信息

在標(biāo)簽中可以放置任何組件，例如，下面的布局代碼除了前面的5個(gè)按鈕外，還放置了一個(gè)標(biāo)簽。

<view style="margin:30px">
     … …
<image src="http://geekori.cn/img/weixin_code.png"
        style="height:300px;width:300px"/>
  action-sheet>
view>

2  對(duì)話框

在小程序中，對(duì)話框需要使用  標(biāo)簽。與 Android 、 iOS 不同的是，這些對(duì)話框需要實(shí)現(xiàn)擺放在布局文件中，默認(rèn)是隱藏狀態(tài)。例如，下面的布局代碼放置了兩個(gè)  標(biāo)簽，并通過點(diǎn)擊相應(yīng)的按鈕顯示其中一個(gè)對(duì)話框。

<view>
  <modal title="標(biāo)題" confirm-text="確定" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
    這是對(duì)話框的內(nèi)容。modal>
  <modal hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"
bindcancel="modalChange2">
    <view> 沒有標(biāo)題沒有取消的對(duì)話框 view>
    <view> 內(nèi)容可以插入節(jié)點(diǎn) view>
  modal>
  <view class="btn-area">
    <button type="default" bindtap="modalTap">點(diǎn)擊彈出modalbutton>
    <button type="default" bindtap="modalTap2">點(diǎn)擊彈出modal2button>
  view>
view>

 標(biāo)簽通過 title 屬性指定標(biāo)題，通過 confire-text 屬性指定確定按鈕的文本，通過 cancel-text 屬性指定取消按鈕的文本，通過 hidden 屬性控制對(duì)話框的隱藏和顯示，通過 bindconfirm 屬性指定點(diǎn)擊確定按鈕要指定的函數(shù)，通過 bindcancel 屬性指定點(diǎn)擊取消按鈕要執(zhí)行的函數(shù)。如果指定了 no-cancel 屬性，不會(huì)顯示取消按鈕。

現(xiàn)在分別點(diǎn)擊第一個(gè)按鈕和第二個(gè)按鈕，會(huì)顯示如圖 4 和圖 5 所示的對(duì)話框。

圖4  帶“確定”和“取消”按鈕的對(duì)話框

圖5  不帶“取消”按鈕的對(duì)話框

點(diǎn)擊“確定”或“取消”按鈕，會(huì)關(guān)閉對(duì)話框。實(shí)際上，這里指的關(guān)閉，就是隱藏  標(biāo)簽，實(shí)現(xiàn)的代碼如下：

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
    })
  },
})