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

本文实例讲述了微信小程序实现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、源代码点击此处本站下载。

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