微信小程序--官方文档补充【操作反馈】--action-sheet组件
2017-07-15 19:28
656 查看
action-sheet组件是从底部弹出可选菜单项,估计也是借鉴iOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件
主要属性:
wxml
<!--触发action-sheet事件--> <button type="primary" bindtap="listenerButton">弹出ActionSheet</button> <!--默认action-sheet为隐藏,由button触发--> <action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" > <block wx:for-items="{{actionSheetItems}}" > <action-sheet-item >{{item}}</action-sheet-item> </block> <!--自动隐藏action-sheet--> <action-sheet-cancel>取消</action-sheet-cancel> </action-sheet>1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
[/code]
js
Page({ data:{ // text:"这是一个页面" actionSheetHidden: true, actionSheetItems: ['item1', 'item2', 'item3'] }, listenerButton: function() { this.setData({ //取反 actionSheetHidden: !this.data.actionSheetHidden }); }, listenerActionSheet:function() { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
[/code]
相关文章推荐
- 微信小程序--官方文档补充【操作反馈】--toast组件
- 微信小程序--官方文档补充【操作反馈】--loading组件
- 微信小程序文档--操作反馈--四个组件
- 微信小程序 action-sheet 反馈上拉菜单
- 微信小程序(二十二)action-sheet组件详细介绍
- 微信小程序把玩(二十二)action-sheet组件
- 微信小程序 action-sheet组件的使用
- 微信小程序把玩(二十二)action-sheet组件
- 微信小程序----wx.showActionSheet(OBJECT)操作菜单(MUI操作表)
- 微信小程序 action-sheet 反馈上拉菜单简单实例
- 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件,开源
- 小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件
- 微信小程序开发官方文档
- 微信小程序官方开发文档
- 微信小程序导航:官方文档+精品教程+demo集合(5月31日更新)
- 微信小程序联盟:官方文档+精品教程+demo集合(6月30日更新)
- 微信小程序官方文档解读:如何才能避开小程序的规则“雷区”
- 微信小程序开发官方文档
- 微信小程序联盟:官方文档+精品教程+demo集合(6月23日更新……)
- Autofac官方文档(六)【注册组件之程序集扫描】