文章詳情頁
微信小程序新手教程之底部菜單action-sheet
瀏覽：220日期：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是菜單項(xiàng)，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)容的增加。
想要體驗(yàn)怎么制作屬于自己個性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開啟你的嗨圖之旅吧!
標(biāo)簽：
微信
相關(guān)文章：
1. 微信小程序官方簡易教程2. 微信小程序星標(biāo)功能在哪？小程序星標(biāo)怎么找不到3. 2018微信元宵燈謎題目答案匯總 微信小程序元宵燈謎題目答案一覽4. Django微信小程序后臺開發(fā)教程的實(shí)現(xiàn)5. 使用12306微信小程序買車票到底靠不靠譜？使用12306微信小程序買車票可信嗎？6. 微信小程序開發(fā)要多久？開發(fā)一個小程序要多長時間？7. 微信小程序“與你見字如面”怎么使用？8. 微信小程序怎么開啟全球化?微信小程序如何開啟全球化？9. 微信小程序猜圖達(dá)人答案是什么？微信小程序猜圖達(dá)人答案合集！10. 為什么微信小程序打不開今日頭條了 今日頭條小程序暫停
排行榜
網(wǎng)公網(wǎng)安備