微信小程序  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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js实现文本框选中的方法
May 26 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 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自动适应范围的分页代码
2008/08/05 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
php获取excel文件数据
2017/04/21 PHP
js Function类型
2011/12/04 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
浅谈js闭包理解
2019/04/01 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
Python复制目录结构脚本代码分享
2015/03/06 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
法人代表证明书
2014/09/18 职场文书
施工现场安全管理制度
2015/08/05 职场文书
初中团委工作总结
2015/08/13 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang