人文关怀

微信小程序新手教程之底部菜单action-sheet

發布時間：2023/11/19 人文关怀 29 博士

生活随笔收集整理的這篇文章主要介紹了微信小程序新手教程之底部菜单action-sheet 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

微信小程序新手教程之底部菜單action-sheet，本篇默認已經成功安裝微信小程序工具，來和小編一起看看吧

底部菜單action-sheet

action-sheet

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

官方文檔

#FormatImgID_0#

.wxml

#FormatImgID_1#

彈出actionsheet  {{item}}  取消

#FormatImgID_2#

.js

#FormatImgID_3#

varitems=['item1','item2','item3','item4']varpageObject={ 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，會觸發action-sheet綁定的事件。在這里可以通過改變hidden控制菜單的隱藏"); } }for(vari=0;i#FormatImgID_4#
運行效果
#FormatImgID_5#
如何讓點擊空白處時不隱藏圖片呢？另外點擊取消的時候自動隱藏菜單不就算了，非要自己寫一句話讓它隱藏，真麻煩。

嗨圖功能

1、專題――DIY圖片的模板，點擊可以生成使用，分享到朋友圈。

2、分享墻――用戶上傳的自己DIY作品。

3、立即制作――可以用自己的圖來DIY。

4、告訴我――告訴產品的改進，內容的增加。

想要體驗怎么制作屬于自己個性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗，開啟你的嗨圖之旅吧!

總結

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。