How to use action-sheet to pop up the bottom menu of WeChat applet-Mini Program Development-php.cn

How to use action-sheet to pop up the bottom menu of WeChat applet

小云云

Release： 2017-12-11 09:26:23

Original

4714 people have browsed it

This article mainly introduces the WeChat applet to implement the action-sheet pop-up bottom menu function. It analyzes the usage skills of the action-sheet component pop-up menu in the form of examples, including element traversal, event response and attribute setting. I hope it can help. to everyone.

1. Effect display

##2. Key code

① index.wxml



  
    {{item.txt}}
  
  取消


  提示：您选择了菜单{{menu}}

Copy after login

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

Copy after login

Have you learned it yet? I hope everyone has to help.

Related recommendations:

Introduction to how to set the bottom navigation column of WeChat Mini Program

About WeChat Mini Program click controls to modify the style Code example

Scrollable navigation effect at the top of WeChat applet

The above is the detailed content of How to use action-sheet to pop up the bottom menu of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!