微信小程序组件action-sheet
操作反馈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的更多相关文章
- 微信小程序组件设计规范
微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...
- 微信小程序组件学习 -- 注册页面
微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 详解封装微信小程序组件及小程序坑(附带解决方案)
一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...
- 微信小程序组件通信
父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...
- 微信小程序组件化实践
Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...
- 微信小程序——组件(二)
在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序组件解读和分析:五、text文本
text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...
随机推荐
- cpio -H newc参数详解
-H format 其中个format可以是: ‘bin’ The obsolete binary format. (2147483647 bytes) ‘odc’ The old (POSIX.1) ...
- 在其模块列表中有一个错误模块“ManagedPipelineHandler”。
C:\Windows\Microsoft.NET\Framework\v4.0.30319 命令行: aspnet_regiis -i
- sdut 2159:Ivan comes again!(第一届山东省省赛原题,STL之set使用)
Ivan comes again! Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 The Fairy Ivan gave Say ...
- sql server函数(isnull,charindex,cast,自定义函数)
SELECT charindex( CAST ( dbo.ufn_IsNullOrEmpty ('109722A3-622D-4FD4-A060-0287C933A89E', a.OUID) AS V ...
- POJ 3468 A Simple Problem with Integers(线段树功能:区间加减区间求和)
题目链接:http://poj.org/problem?id=3468 A Simple Problem with Integers Time Limit: 5000MS Memory Limit ...
- WPF进阶之接口(1):IValueConverter,IMultiValueConverter
看一个例子,FontFamily="Trebuchet MS, GlobalSansSerif.CompositeFont" .这样一条简单的语句,熟悉WPF的人在xaml中可能经 ...
- Hadoop1.2.1 单机模式安装
首先安装JDK: 然后安装hadoop: 最后的实例测试:首先在 /opt/data 目录下创建 input目录, 然后把hadoop的conf目录下的所有xml文件拷贝到上面的input目录, 然后 ...
- nginx 服务器重启命令,关闭(转)
nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试nginx配置文件是 ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- ORACLE WITH AS 用法,创建临时表
语法: with tempName as (select ....) select ... –针对一个别名with tmp as (select * from tb_name) –针对多个别名with ...