微信小程序开发实战(16):交互组件
1. 动作表单(ActionSheet)
iOS程序员一定对ActionSheet非常熟悉,这是Cocoa Touch很常用的UI组件。使用ActionSheet会从当前窗口底部往上弹出一个窗口,可以在该窗口放置任何组件,例如,如图1所示的一排按钮。
图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实现代码。
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 点击“取消”按钮输出的日志信息
在<action-sheet>标签中可以放置任何组件,例如,下面的布局代码除了前面的5个按钮外,还放置了一个<image>标签。
<view style="margin:30px">
… …
<image src="http://geekori.cn/img/weixin_code.png"
style="height:300px;width:300px"/>
</action-sheet>
</view>
显示ActionSheet的效果如图3所示。
图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所示的对话框。
图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
})
},
})
- Enterprise Library深入解析与灵活应用(5):创建一个简易版的批处理执行器,认识Enterprise Library典型的配置方式和对象创建方式
- 晚上好啊!这是今天人工智能精选要闻
- 构建Flex应用的10大误区
- Flex的起步推动新语言学习
- 简单科普云计算相关内容
- Silverlight初级教程-开发工具
- WCF的Binding模型之五:绑定元素(Binding Element)
- 2018年物联网发展趋势
- Silverlight初级教程-概述
- WCF的Binding模型之四:信道工厂(Channel Factory)
- 如何做一个好的前端重构工程师
- 云计算是否真的对企业来说无所不能?
- 科协带你开个2017年科技世界的总结会!
- 基于StockRanker算法的机器学习量化策略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 死磕Java之Java数据类型的来龙去脉
- 请不要再使用判断进行参数校验了
- 检测假新闻:比较不同的分类方法的准确率
- SpringBoot下载xlsx模板,导出excel数据
- 如何利用机器学习和Gatsby.js创建假新闻网站
- Spring Security 实战干货: 401和403状态
- Spring Data R2DBC响应式操作MySQL
- 项目端口可以设置为 6666 吗?
- 【JS】666- window.reqeustIdleCallback方法详解
- 一个无聊的宏定义
- windows的Ubuntu子系统ssh和ftp
- 面试官问:如何设计一个安全的对外接口?
- [树莓派公网远程监控]autossh反向代理
- 用 LDSC 计算遗传度以及遗传相关性
- SVG 入门指南(初学者入门必备)