微信小程序实现的点击按钮弹出底部上拉菜单功能示例

本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能。分享给大家供大家参考，具体如下：

index.wxml

按钮类型=' default '绑定tap=' actionSheetTap '弹出动作表/button action-sheet hidden=' { { action sheet hidden } } ' bind change=' action sheet bind change ' block wx : for-items=' { { action sheet items } } '动作表-item bind tap=' bind { { item }。绑定tap } } ' { { item。txt } }/动作表-项目/块操作-工作表-取消类=“取消”取消/操作-工作表-取消/操作-工作表视图提示：您选择了菜单{{menu}}/viewindex.js

页面({ data:{ //text: '这是一个页面actionSheetHidden:true，actionsheetitems :[{ bind tap : ' Menu 1 '，txt: '菜单1'}，{bindtap:'Menu2 '，txt: '菜单2'}，{bindtap:'Menu3 '，txt: '菜单3'} ]，menu:'' }，actionsheettap : function(){ this。setdata({ actionsheethidden :这个。数据。actionsheethidden)}，actionsheetbindchange :函数(){ this。setdata({ actionsheethidden :this.data.actionSheetHidden }) }，bindmanu 1:函数(){ this。setdata({ menu :1，actionSheetHidden:this.data.actionSheetHidden }) }，bindmanu 2:函数(){ this。setdata({ menu :2，actionSheetHidden:这个。数据。actionsheethidden)}，BindMenu : FuncTion(){ this。setdata({ menu :3，actionSheetHidden:这个。数据。actionsheethidden })} })运行效果（调试环境问题，颜色出现了偏差，效果凑合看~):

PS:关于微信小程序组件相关说明还可查看微信小程序组件说明表：http://工具。JB 51。net/table/wx _ component

希望本文所述对大家微信小程序开发有所帮助。