操作反馈action-sheet:官方文档

Demo Code:

Page({
data: {
actionSheetHidden: true,
actionSheetItems: ['item1', 'item2', 'item3', 'item4']
},
actionSheetTap: function(e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
});
},
actionSheetChange:function(e){
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
});
},
bindItemTap:function(e){
console.log('tap ' + e.currentTarget.dataset.name);
}
})

JS

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<block wx:for="{{actionSheetItems}}">
<action-sheet-item class="item" bindtap="bindItemTap" data-name="{{item}}">{{item}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>

WXML

Tip:

开发工具选择的手机型号不同,有的会看不到 取消 选项

微信小程序组件action-sheet的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  4. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  5. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  6. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  7. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  8. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  9. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  10. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

随机推荐

  1. php -- php检测文件编码的方法示例

    <?php /** * 检测文件编码 * @param string $file 文件路径 * @return string|null 返回 编码名 或 null */ function det ...

  2. zabbix2.0 添加自定义监控项

    1. key的创建 客户端配置文件如下: root@192.168.100.254:/usr/local/zabbix/sbin# egrep -v "(^#|^$)" ../et ...

  3. WebService的初级学习

    复习准备 1. Schema约束: 1.1   namespace相当于Schema文件的id: 1.2   targetNamespace属性用来指定schema文件的namespace的值; 1. ...

  4. InstallSheild 获取系统环境变量,如Desktop路径等

    使用FOLDER_DESKTOP变量获取的桌面路径可能为:C:\Users\Public\Desktop 而不是C:\Users\用户\Desktop Copy and paste the follo ...

  5. Libcap的简介及安装

    Libpcap 简介 libpcap 是unix/linux 平台下的网络数据包捕获函数包, 大多数网络监控软件都以它为基础. Libpcap 可以在绝大多数类unix 平台下工作. Libpcap  ...

  6. ios开发之--系统控件显示中文

    虽然一直知道X-code肯定提供有语言本地化的设置地方,但是一直也做个记录,有些时候的汉化,还是需要使用代码去控制,键盘的右下角.navagiton的return使用代码修改,调用系统相机时,也是出现 ...

  7. 云服务器 ECS Linux 保存用户登录操作命令记录

    转载自 : https://help.aliyun.com/knowledge_detail/41210.html 云服务器 ECS Linux 如果要保存用户登录操作记录,则可以通过在 /etc/p ...

  8. highcharts配置的效果如下

    配置如下: function init(categoryArray,seriesData,month_first_day,month_last_day,currDay){ var chart = Hi ...

  9. Android 满屏显示自定义的View,并进行移动

    新建一个类,继承View package com.topcrab.mygame; import android.content.Context; import android.graphics.Bit ...

  10. hdu2094—看似拓扑实际上是一道思维题

    HDU2094  产生冠军 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2094 题意:中文题,就不解释了.题意已经非常清楚了. 这道题的看起来像是一 ...