Introduction détaillée du composant de feuille d'action de l'applet WeChat-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2017-02-20 14:12:09

original

2127 Les gens l'ont consulté

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>

Copier après la connexion

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(){
 // 页面关闭
 }
})

Copier après la connexion

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 !