微信小程序开发实战（16）：交互组件

发表时间：2021-1-11

发布人：葵宇科技

浏览次数：156

1. 动作表单（ActionSheet）

iOS 程序员一定对 ActionSheet 非常熟悉，这是 Cocoa Touch 很常用的 UI 组件。使用 ActionSheet 会从当前窗口底部往上弹出一个窗口，可以在该窗口放置任何组件，例如，如图 1 所示的一排按钮。

图1 ActionSheet的效果

图 1 是小程序 ActionSheet 的效果，与 iOS ActionSheet 的效果类似。在小程序中使用 ActionSheet 要使用标签，该标签中可以包含任意的组件，因此，可以在 ActionSheet 上放置任何小程序支持的 UI 元素。例如，下面的布局代码放置了 4 个普通按钮和一个“取消”按钮，效果就是图 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>

在这段代码中，使用动态生成了 4 个标签，这 4 个标签分别通过 bindtap 属性指定了 4 个用于响应 item 点击事件的函数（ bindItem1 、 bindItem2 、 bindItem3 和 bindItem4 ）。在循环的外面使用标签添加了一个“取消”按钮，点击“取消”按钮，无需加任何 JavaScript 代码就会关闭 ActionSheet 。

通过标签的 hidden 属性可以控制 ActionSheet 的显示和隐藏，该属性值为 true ，表示隐藏 ActionSheet ，为 false ，表示显示 ActionSheet 。通过 bindchange 属性指定一个事件函数，当点击“取消”按钮或 ActionSheet 外部区域，会调用该函数，通常在该函数中隐藏 ActionSheet 。

下面是完整的 JavaScript 实现代码。

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
  data: {
    actionSheetHidden: true,
    actionSheetItems: items
  },
  //  用于显示和隐藏ActionSheet
  actionSheetTap: function (e) {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  //  点击“取消”按钮或ActionSheet的外部区域，会调用该函数
  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 后，当点击“取消”按钮或 ActionSheet 外部区域，会在 Console 中输出如图 2 所示的日志信息。然后 ActionSheet 会隐藏（因为 actionSheetHidden 变量被设为 true ）。

图2 点击“取消”按钮输出的日志信息

在标签中可以放置任何组件，例如，下面的布局代码除了前面的5个按钮外，还放置了一个标签。

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

2 对话框

在小程序中，对话框需要使用标签。与 Android 、 iOS 不同的是，这些对话框需要实现摆放在布局文件中，默认是隐藏状态。例如，下面的布局代码放置了两个标签，并通过点击相应的按钮显示其中一个对话框。

<view>
  <modal title="标题" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
    这是对话框的内容。modal>
  <modal hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2"
bindcancel="modalChange2">
    <view> 没有标题没有取消的对话框 view>
    <view> 内容可以插入节点 view>
  modal>
  <view class="btn-area">
    <button type="default" bindtap="modalTap">点击弹出modalbutton>
    <button type="default" bindtap="modalTap2">点击弹出modal2button>
  view>
view>

标签通过 title 属性指定标题，通过 confire-text 属性指定确定按钮的文本，通过 cancel-text 属性指定取消按钮的文本，通过 hidden 属性控制对话框的隐藏和显示，通过 bindconfirm 属性指定点击确定按钮要指定的函数，通过 bindcancel 属性指定点击取消按钮要执行的函数。如果指定了 no-cancel 属性，不会显示取消按钮。

现在分别点击第一个按钮和第二个按钮，会显示如图 4 和图 5 所示的对话框。

图4 带“确定”和“取消”按钮的对话框

图5 不带“取消”按钮的对话框

点击“确定”或“取消”按钮，会关闭对话框。实际上，这里指的关闭，就是隐藏标签，实现的代码如下：

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