How to pop up the bottom menu in WeChat mini program

This article mainly introduces the WeChat applet to implement the action-sheet pop-up bottom menu function, and analyzes the usage skills of the action-sheet component pop-up menu in the form of examples, including element traversal, event response, property setting and other operation methods, and The source code is attached for readers to download and refer to. Friends in need can refer to

. This article describes the example of WeChat applet implementing the action-sheet pop-up bottom menu function. Share it with everyone for your reference, as follows:

Key code

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use angular to write Message components

How to implement component communication in vue-cli

What should we pay attention to when optimizing Vue projects?

Developed using modular approach in vuejs

The above is the detailed content of How to pop up the bottom menu in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!