微信小程序  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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JS 树形递归实例代码
May 18 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
初识PHP中的Swoole
2016/04/05 PHP
JavaScript 调试器简介
2009/02/21 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
详解python中asyncio模块
2018/03/03 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python数学形态学实例分析
2019/09/06 Python
python实现手势识别的示例(入门)
2020/04/15 Python
python爬虫用mongodb的理由
2020/07/28 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
交通事故起诉书
2015/05/19 职场文书
javaScript Array api梳理
2021/03/31 Javascript
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers