微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2019-03-28 10:58
1156 查看
本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能。分享给大家供大家参考,具体如下:
index.wxml
<button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange"> <block wx:for-items="{{actionSheetItems}}"> <action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item> </block> <action-sheet-cancel class="cancel">取消</action-sheet-cancel> </action-sheet> <view> 提示:您选择了菜单{{menu}} </view>
index.js
Page({ data:{ // text:"这是一个页面" actionSheetHidden:true, actionSheetItems:[ {bindtap:'Menu1',txt:'菜单1'}, {bindtap:'Menu2',txt:'菜单2'}, {bindtap:'Menu3',txt:'菜单3'} ], menu:'' }, actionSheetTap:function(){ this.setData({ actionSheetHidden:!this.data.actionSheetHidden }) }, actionSheetbindchange:function(){ this.setData({ actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu1:function(){ this.setData({ menu:1, actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu2:function(){ this.setData({ menu:2, actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu3:function(){ this.setData({ menu:3, actionSheetHidden:!this.data.actionSheetHidden }) } })
运行效果(调试环境问题,颜色出现了偏差,效果凑合看~):
PS:关于微信小程序组件相关说明还可查看微信小程序组件说明表:http://tools.jb51.net/table/wx_component
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- 微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序webview实现长按点击识别二维码功能示例
- 实现底部导航栏中间凸起,(点击中间凸出按钮弹出菜单)
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 小程序中如何实现操作菜单的显示(点击选取图片,弹出菜单拍摄、相册)功能
- 微信小程序点击按钮实现弹出模态框
- 微信小程序实现弹出菜单功能
- 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
- 微信小程序实现点击文字页面跳转功能【附源码下载】
- JS实现的按钮点击颜色切换功能示例
- 微信小程序实现添加手机联系人功能示例
- 微信小程序实现简单input正则表达式验证功能示例
- 微信小程序实现动态显示和隐藏某个控件功能示例
- 主页底部菜单用BaseActivity实现及程序的退出功能实现
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
- 微信小程序使用modal组件弹出对话框功能示例