微信小程序  action-sheet详解及实例代码


Posted in Javascript onNovember 09, 2016

微信小程序 开发文档,相关文章:

微信小程序  action-sheet

属性名 类型 默认值 说明
hidden Boolean true 是否隐藏
bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据

action-sheet-item

底部菜单表的子选项。

action-sheet-cancel

底部菜单表的取消按钮,和action-sheet-item的区别是,点击它会触发action-sheet的change事件,并且外观上会同它上面的内容间隔开来。

示例代码:

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}

for (var i = 0; i < items.length; ++i) {
 (function(itemName) {
 pageObject['bind' + itemName] = function(e) {
 console.log('click' + itemName, e)
 }
 })(items[i])
}

Page(pageObject)
action-sheet

微信小程序  action-sheet详解及实例代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 #Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 #Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 #Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 #Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 #Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 #Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 #Javascript
You might like
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python构建网页爬虫原理分析
2017/12/19 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
药品采购员岗位职责
2014/02/08 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
会计学毕业生求职信
2014/06/25 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
通知书大全
2015/04/27 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Nginx反向代理、重定向
2022/04/13 Servers