微信小程序 action-sheet组件的使用
2018-03-13 16:05
896 查看
微信小程序 action-sheet组件的使用
wxml
<!--触发actionSheet事件--> <button type="primary" catchtap="actionSheet"> 弹出ActionSheet </button> <!--默认action-sheet为隐藏,由button触发--> <action-sheet hidden="{{actionSheetHidden}}" catchchange="actionSheet" > <block wx:for="{{actionSheetItems}}" > <action-sheet-item bindtap="itemTap" data-name="item">{{item}}</action-sheet-item> </block> <!--自动隐藏action-sheet--> <action-sheet-cancel>取消</action-sheet-cancel> </action-sheet>
js
Page({ data:{ actionSheetHidden: true, actionSheetItems: ['item1', 'item2' 4000 , 'item3'] }, actionSheet: function() { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }); }, //显示是否点击成功 itemTap:function(){ console.log('tap ' + e.currentTarget.dataset.name); }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })
相关文章推荐
- 微信小程序(二十二)action-sheet组件详细介绍
- 微信小程序把玩(二十二)action-sheet组件
- 微信小程序例子——使用action-sheet弹出小程序底部菜单
- 微信小程序--官方文档补充【操作反馈】--action-sheet组件
- 微信小程序把玩(二十二)action-sheet组件
- 微信小程序例子——使用progress组件实现读取进度效果
- 微信小程序例子——使用modal组件弹出对话框
- 微信小程序例子——使用画布组件绘制一个半径为50px的圆
- 微信小程序例子——使用image组件显示图片
- 【微信小程序常见问题】使用picker组件显示年份解决方案
- 微信小程序 image组件binderror使用例子与js中的onerror区别
- 微信小程序例子——使用画布组件绘制一个会自动旋转的正方体
- 微信小程序例子——如何使用view组件显示文字
- 微信小程序开发详解(四)---微信小程序开发组件使用初步
- 微信小程序 action-sheet底部菜单详解
- 微信小程序例子——使用画布组件绘制一条长度为230px的水平直线
- 微信小程序例子——使用text组件实现转义符换行
- 微信小程序例子——使用slider设置数据值和switch开关组件
- 微信小程序 action-sheet详解及实例代码
- 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案