Maison  >  Article  >  Applet WeChat  >  Introduction détaillée du composant de feuille d'action de l'applet WeChat

Introduction détaillée du composant de feuille d'action de l'applet WeChat

高洛峰
高洛峰original
2017-02-20 14:12:092103parcourir

Cet article présente principalement des informations pertinentes sur l'introduction détaillée du composant feuille d'action de l'applet WeChat. Les amis dans le besoin peuvent s'y référer

微信小程序 action-sheet组件详细介绍

La feuille d'action. Le composant est à partir du bas. Les éléments de menu facultatifs apparaissent, qui sont probablement ajoutés en fonction de la conception de l'IOS. La feuille d'action comporte deux sous-composants, l'élément de feuille d'action est pour chaque option, la feuille d'action-annuler annule l'option. , et il y a un intervalle, et cliquer déclenchera l'événement d'écoute de la feuille d'action

Attributs principaux :

微信小程序 action-sheet组件详细介绍

wxml

<!--触发action-sheet事件-->
<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>
<!--默认action-sheet为隐藏,由button触发-->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" >

 <block wx:for-items="{{actionSheetItems}}" > 
  <action-sheet-item >{{item}}</action-sheet-item>
 </block>
 <!--自动隐藏action-sheet-->
 <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

js

Page({
 data:{
 // text:"这是一个页面"
 actionSheetHidden: true,
 actionSheetItems: [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;]

 },

 listenerButton: function() {
  this.setData({
  //取反
   actionSheetHidden: !this.data.actionSheetHidden
  });
 },

 listenerActionSheet:function() {
 this.setData({
  actionSheetHidden: !this.data.actionSheetHidden
 })
 },


 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

Plus de WeChat Veuillez prêter attention au site Web PHP chinois pour des articles connexes sur l'introduction détaillée du composant feuille d'action du mini programme !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn