微信小程序實現的點擊按鈕彈出底部上拉菜單功能示例

2020-03-21 16:01:16

字體：大中小

來源：轉載

供稿：網友

本文實例講述了微信小程序實現的點擊按鈕彈出底部上拉菜單功能。分享給大家供大家參考，具體如下：

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  }) }})

運行效果（調試環境問題，顏色出現了偏差，效果湊合看~）：

微信小程序,點擊按鈕,上拉菜單