微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

2019-11-19 14:45:54

字体：大中小

来源：转载

供稿：网友

本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① index.wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button><action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">  <block wx:for-items="{{actionSheetItems}}" wx:key="{{txt}}">    <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  }) }})

3、源代码点击此处本站下载。

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

上一篇：微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

下一篇：微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】