文章详情页
微信小程序新手教程之底部菜单action-sheet
微信小程序新手教程之底部菜单action-sheet，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
底部菜单action-sheet
action-sheetaction-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#
<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，会触发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、告诉我——告诉产品的改进，内容的增加。
想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!
标签：
微信
相关文章：
排行榜
网公网安备