Comment faire apparaître le menu inférieur dans le mini-programme WeChat

Cet article présente principalement l'applet WeChat pour implémenter la fonction de menu contextuel du composant de feuille d'action et analyse les compétences d'utilisation du menu contextuel du composant de feuille d'action sous forme d'exemples, y compris le parcours d'éléments, la réponse aux événements. , définition des attributs et autres méthodes de fonctionnement, et Le code source est joint pour que les lecteurs puissent le télécharger et s'y référer. Les amis dans le besoin peuvent s'y référer

Cet article décrit l'exemple de l'applet WeChat implémentant la feuille d'action pop. -Fonction de menu inférieur. Partagez-le avec tout le monde pour votre référence, comme suit :

Code clé

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Utiliser Angular pour écrire des composants de message

Comment implémenter la communication entre composants dans vue-cli

À quoi devons-nous faire attention lors de l'optimisation des projets Vue ?

Développé en utilisant une approche modulaire dans vuejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!