微信小程序（二十二）action-sheet組件詳細介紹

更新時間：2016年09月27日 17:21:37 作者：順子_RTFSC

這篇文章主要介紹了微信小程序action-sheet組件詳細介紹的相關資料,需要的朋友可以參考下

action-sheet組件是從底部彈出可選菜單項，估計也是借鑒IOS的設計添加的，action-sheet有兩個子組件， action-sheet-item為每個選項，action-sheet-cancel取消選項，與action-sheet-item中間會有間隔，并且點擊會觸發(fā)action-sheet監(jiān)聽事件

主要屬性：

wxml

<!--觸發(fā)action-sheet事件-->
<button type="primary" bindtap="listenerButton">彈出ActionSheet</button>
<!--默認action-sheet為隱藏，由button觸發(fā)-->
<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: ['item1', 'item2', 'item3']

 },

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

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


 onLoad:function(options){
 // 頁面初始化 options為頁面跳轉所帶來的參數(shù)
 },
 onReady:function(){
 // 頁面渲染完成
 },
 onShow:function(){
 // 頁面顯示
 },
 onHide:function(){
 // 頁面隱藏
 },
 onUnload:function(){
 // 頁面關閉
 }
})

相關文章：

hello WeApp                     icon組件
Window                             text組件                                 switch組件
 tabBar底部導航               progress組件                         action-sheet
應用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件