文章詳情頁
微信小程序新手教程之底部菜單action-sheet
瀏覽：267日期：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ā)點擊后作出的相應(yīng)，點擊action-sheet-cancel時會觸發(fā)action-sheet的bindchange事件。可以在bindchange綁定的函數(shù)中控制菜單的顯示。另外點擊空白處時菜單也會隱藏。
官方文檔
#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("點擊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#
運行效果
#FormatImgID_5#
如何讓點擊空白處時不隱藏圖片呢？另外點擊取消的時候自動隱藏菜單不就算了，非要自己寫一句話讓它隱藏，真麻煩。
嗨圖功能
1、專題——DIY圖片的模板，點擊可以生成使用，分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來DIY。
4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。
想要體驗怎么制作屬于自己個性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗，開啟你的嗨圖之旅吧!
標(biāo)簽：
微信
相關(guān)文章：
1. 微信小程序 post請求2. 微信小程序仍在“流量搭建期”？微信小程序流量搭建期介紹！3. 微信小程序怎么無限生成小程序碼？小程序碼怎么無限生成4. 微信小程序強飛刀手怎么玩？微信小程序強飛刀手玩法介紹！5. 如何調(diào)整微信小程序的順序？整微信小程序順序的方法6. 蘋果對微信小程序開發(fā)有哪些限制?蘋果對微信小程序開發(fā)的限制是什么?7. 微信小程序入口在哪 微信小程序為什么找不到8. 微信小程序IQ挑戰(zhàn)大會題目答案是什么？微信小程序IQ挑戰(zhàn)大會題目答案一覽！9. 微信小程序在哪里進(jìn)入 微信小程序地址介紹10. 微信小程序怎么生成iPhone XS訂單 訂單生成器使用教程
排行榜
網(wǎng)公網(wǎng)安備