用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发实战(16):交互组件

Rolan 2020-8-6 10:14

iOS 程序员一定对 ActionSheet 非常熟悉,这是 Cocoa Touch 很常用的 UI 组件。

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
    })
  },
})
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 李宁的极客世界 来自: CSDN