快捷導(dǎo)航

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

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

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

微信小程序 action-sheet

action-sheet是從底部彈出的選擇菜單，子菜單通過(guò)action-sheet-item和action-sheet-cancel指定，action-sheet-item是菜單項(xiàng)，action-sheet-cancel顧名思義是取消隱藏菜單，我們可以通過(guò)為action-sheet-item添加bindtap來(lái)觸發(fā)點(diǎn)擊后作出的相應(yīng)，點(diǎn)擊action-sheet-cancel時(shí)會(huì)觸發(fā)action-sheet的bindchange事件?？梢栽赽indchange綁定的函數(shù)中控制菜單的顯示。另外點(diǎn)擊空白處時(shí)菜單也會(huì)隱藏。

官方文檔

.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("點(diǎn)擊ation-sheet-cancel，會(huì)觸發(fā)action-sheet綁定的事件。在這里可以通過(guò)改變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)

運(yùn)行效果