微信小程序  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 相关文章推荐
js取消单选按钮选中示例代码
Nov 14 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
浅谈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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue动态改变背景图片demo分享
2018/09/13 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
Python实现决策树C4.5算法的示例
2018/05/30 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
ubuntu上安装python的实例方法
2019/09/30 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
中学教师请假制度
2014/02/03 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
公务员政审材料
2014/12/23 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫