acmen、l学习案例集锦《二》弹框组件modal,底部菜单action-sheet


Acmen、L 学习案例集锦《二》弹框组件 modal,底部菜单 action-sheet 一:弹框组件 modal modal modal 类似于 javascript 中的 confirm 弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过 触发事件调用凼数来控制 hidden 属性。  官方文档  .wxml  .js Page({ data:{ hidden:false, nocancel:false }, cancel: function(){ this.setData({ hidden: true }); }, confirm: function(){ this.setData({ nocancel: !this.data.nocancel }); console.log("clicked confirm"); } })  运行效果 二:底部菜单 action-sheet action-sheet action-sheet 是从底部弹出的选择菜单,子菜单通过 action-sheet-item 和 action-sheet-cancel 指定,action-sheet-item 是菜单 项,action-sheet-cancel 顾名思义是取消隐藏菜单,我们可以通过为 action-sheet-item 添加 bindtap 来触发点击后作出的相应, 点击 action-sheet-cancel 时会触发 action-sheet 的 bindchange 事件。可以在 bindchange 绑定的凼数中控制菜单的显示。另外 点击空白处时菜单也会隐藏。  官方文档  .wxml  .js 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)  运行效果 如何让点击空白处时不隐藏图片呢?另外点击取消的时候自动隐藏菜单不就算了,非要自己写一句话让它隐藏,真麻烦。
还剩6页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf