文章詳情頁
微信小程序新手教程之底部菜單action-sheet
瀏覽：269日期：2022-07-15 17:04:24
微信小程序新手教程之底部菜單action-sheet，本篇默認(rèn)已經(jīng)成功安裝微信小程序工具，來和小編一起看看吧
底部菜單action-sheet
action-sheetaction-sheet是從底部彈出的選擇菜單，子菜單通過action-sheet-item和action-sheet-cancel指定，action-sheet-item是菜單項，action-sheet-cancel顧名思義是取消隱藏菜單，我們可以通過為action-sheet-item添加bindtap來觸發(fā)點(diǎn)擊后作出的相應(yīng)，點(diǎn)擊action-sheet-cancel時會觸發(fā)action-sheet的bindchange事件。可以在bindchange綁定的函數(shù)中控制菜單的顯示。另外點(diǎn)擊空白處時菜單也會隱藏。
官方文檔
#FormatImgID_0#
.wxml
#FormatImgID_1#
<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>#FormatImgID_2#
.js
#FormatImgID_3#
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，會觸發(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)#FormatImgID_4#
運(yùn)行效果
#FormatImgID_5#
如何讓點(diǎn)擊空白處時不隱藏圖片呢？另外點(diǎn)擊取消的時候自動隱藏菜單不就算了，非要自己寫一句話讓它隱藏，真麻煩。
嗨圖功能
1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來DIY。
4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。
想要體驗怎么制作屬于自己個性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗，開啟你的嗨圖之旅吧!
標(biāo)簽：
微信
相關(guān)文章：
1. 微信小程序新手教程之加載本地圖片方法2. 微信小程序紅利點(diǎn)是什么?微信小程序紅利點(diǎn)介紹！3. 微信小程序全面升級增加哪些功能？微信小程序全面升級增加功能介紹！4. 微信小程序代碼加固怎么弄 小程序代碼加固設(shè)置教程5. 微信小程序新手教程之估價系統(tǒng)代碼示例6. 微信小程序緊急開通問題疫苗查詢?nèi)肟凇膀v訊安心計劃”7. 微信小程序有小程序商店嗎？微信小程序是否有小程序商店？8. 微信小程序開發(fā)一般多少錢？微信小程序開發(fā)要多少資金？9. 微信小程序?qū)嵗坛蹋涸趺床樵兓疖嚻保ê琩emo）10. 微信悅動音符怎么玩？微信小程序悅動音符的玩法介紹
排行榜
網(wǎng)公網(wǎng)安備