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

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

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

微信小程序 action-sheet

action-sheet是從底部彈出的選擇菜單，子菜單通過action-sheet-item和action-sheet-cancel指定，action-sheet-item是菜單項(xiàng)，action-sheet-cancel顧名思義是取消隱藏菜單，我們可以通過為action-sheet-item添加bindtap來觸發(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綁定的事件。在這里可以通過改變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)行效果

如何讓點(diǎn)擊空白處時(shí)不隱藏圖片呢？另外點(diǎn)擊取消的時(shí)候自動(dòng)隱藏菜單不就算了，非要自己寫一句話讓它隱藏，真麻煩。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

JS前端接口請(qǐng)求參數(shù)混淆方案分享
這篇文章主要為大家介紹了JS前端接口請(qǐng)求參數(shù)混淆方案分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
微信小程序動(dòng)態(tài)傳參實(shí)例詳解
這篇文章主要介紹了微信小程序動(dòng)態(tài)傳參實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-04-04
微信小程序向左滑動(dòng)刪除功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序向左滑動(dòng)刪除功能的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2017-03-03
JavaScript基礎(chǔ)之函數(shù)詳解
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-12-12
微信小程序登陸流程詳細(xì)介紹
這篇文章主要介紹了微信小程序登陸流程詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2017-01-01
微信小程序圖片等比例縮放（圖片自適應(yīng)屏幕）
這篇文章主要介紹了微信小程序圖片等比例縮放（圖片自適應(yīng)屏幕）的相關(guān)資料,需要的朋友可以參考下
2016-11-11
深入淺出探究JavaScript中的async與await
任意一個(gè)名稱都是有意義的，先從字面意思來理解。async 是“異步”的簡寫，而 await 可以認(rèn)為是 async wait 的簡寫。所以應(yīng)該很好理解 async 用于申明一個(gè) function 是異步的，而 await 用于等待一個(gè)異步方法執(zhí)行完成。下文將帶你深入探究JavaScript中的async與await
2021-09-09
JS中的四種數(shù)據(jù)類型判斷方法
js有多種數(shù)據(jù)類型（Number（數(shù)值）、String（字符串）、Boolean（布爾值）、Null、Undefined、Symbol、Object、函數(shù)等），在開發(fā)過程中難免需要判斷數(shù)據(jù)類型，本文總結(jié)了四種判斷方法給大家分享,需要的朋友可以參考一下
2021-11-11
mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析
這篇文章主要為大家介紹了mitt tiny-emitter發(fā)布訂閱應(yīng)用場景源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
微信小程序生命周期詳解
這篇文章主要介紹了微信小程序生命周期的相關(guān)資料,創(chuàng)建、到開始、暫停、喚起、停止、卸載等過程，需要的朋友可以參考下
2016-10-10