微信小程序新手教程之底部菜單action-sheet
微信小程序新手教程之底部菜單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時(shí)會(huì)觸發(fā)action-sheet的bindchange事件。可以在bindchange綁定的函數(shù)中控制菜單的顯示。另外點(diǎn)擊空白處時(shí)菜單也會(huì)隱藏。
官方文檔
#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，會(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)#FormatImgID_4#
運(yùn)行效果
#FormatImgID_5#
如何讓點(diǎn)擊空白處時(shí)不隱藏圖片呢？另外點(diǎn)擊取消的時(shí)候自動(dòng)隱藏菜單不就算了，非要自己寫一句話讓它隱藏，真麻煩。
嗨圖功能
1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來DIY。
4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。
想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開啟你的嗨圖之旅吧!
相關(guān)文章：
網(wǎng)公網(wǎng)安備