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

深碍√TFBOYSˉ_ 2023-03-03 11:12 12阅读 0赞

1.  动作表单（ActionSheet）

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

![format_png][]

图1  ActionSheet的效果

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

<view style="margin:30px">
      <button type="default" bindtap="actionSheetTap">弹出action sheet</button>
      <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>

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

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

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

显示ActionSheet后，当点击“取消”按钮或ActionSheet外部区域，会在Console中输出如图2所示的日志信息。然后ActionSheet会隐藏（因为actionSheetHidden变量被设为true）。

![format_png 1][]

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

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

显示ActionSheet的效果如图3所示。

![format_png 2][]

图3  带图像的ActionSheet

2  对话框

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

<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">点击弹出modal</button>
        <button type="default" bindtap="modalTap2">点击弹出modal2</button>
      </view>
    </view>

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

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

![format_png 3][]

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

![format_png 4][]

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

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

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

[format_png]: /images/20230208/65f0c456aef840ccab515c800dc94eef.png
[format_png 1]: /images/20230208/b0e5e47d66ca4c5bad9689fdf1fdfd6c.png
[format_png 2]: /images/20230208/b3346308665f4451b8326ef96d9ab43c.png
[format_png 3]: /images/20230208/2b2865a490474651ac2106199dfe91b5.png
[format_png 4]: /images/20230208/36ed2ae3d68a45e0b7998e7bc53dc987.png