微信小程序 action-sheet底部菜單詳解

更新時間：2016年10月27日 10:08:58 投稿：lqh

這篇文章主要介紹了微信小程序 action-sheet底部菜單詳解的相關資料,并附實例代碼，需要的朋友可以參考下

微信小程序 action-sheet

action-sheet是從底部彈出的選擇菜單，子菜單通過action-sheet-item和action-sheet-cancel指定，action-sheet-item是菜單項，action-sheet-cancel顧名思義是取消隱藏菜單，我們可以通過為action-sheet-item添加bindtap來觸發(fā)點擊后作出的相應，點擊action-sheet-cancel時會觸發(fā)action-sheet的bindchange事件。可以在bindchange綁定的函數(shù)中控制菜單的顯示。另外點擊空白處時菜單也會隱藏。

官方文檔

.wxml

<button type="default" bindtap="actionSheetTap">彈出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <block wx:for-items="{{actionSheetItems}}">
    <action-sheet-item bindtap="bind{{item}}">{{item}}</action-sheet-item>
  </block>
  <action-sheet-cancel >取消</action-sheet-cancel>
</action-sheet>

.js

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
  actionSheetHidden: true,
  actionSheetItems: items
 },
 actionSheetTap: function(e) {
  console.log(this);
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  })
 },
 actionSheetChange: function(e) {
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  });
  console.log("點擊ation-sheet-cancel，會觸發(fā)action-sheet綁定的事件。在這里可以通過改變hidden控制菜單的隱藏");
 }
}

for (var i = 0; i < items.length; ++i) {
 (function(itemName) {
  pageObject['bind' + itemName] = function(e) {
   console.log('click' + itemName, e)
  }
 })(items[i])
}

Page(pageObject)

運行效果