微信小程序 action-sheet 反馈上拉菜单简单实例
更新时间：2017年05月11日 17:04:57 作者：xiaochun365
这篇文章主要介绍了微信小程序 action-sheet 反馈上拉菜单简单实例的相关资料,需要的朋友可以参考下
微信小程序 action-sheet 反馈上拉菜单简单实例
看下实现效果图：
js
var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
data: {
actionSheetHidden: true,
actionSheetItems: items
},
actionSheetTap: function (e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
},
actionSheetChange: function (e) {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
}
}
for (var i = 0; i < items.length; ++i) {
(function (itemName) {
pageObject['bind' + itemName] = function (e) {
console.log('click' + itemName, e)
}
})(items[i])
}
Page(pageObject)
wxml
<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<block wx:for-items="{{actionSheetItems}}">
<action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了微信小程序 快捷键整理的相关资料,这里整理了不少项目中经常用到的快捷键，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了 quickjs 封装 JavaScript 沙箱，在前文 JavaScript 沙箱探索 中声明了沙箱的接口，并且给出了一些简单的执行任意第三方 js 脚本的代码，但并未实现完整的 IJavaScriptShadowbox，下面便讲一下如何基于 quickjs 实现,需要的朋友可以参考一下2021-10-10
这篇文章主要为大家介绍了Three.js实现雪糕地球的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了JavaScript对象管家Proxy使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要给大家分享使用javascript解析二维码的三种方式，二维码就是将我们能看懂的文字语言,以机器语言的形式存储了起来。其中黑色小方块代表的是1,白色小方块代表的是0，黑白相间的图案其实就是一串编码,扫码的过程就是翻译这些编码的过程,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了微信小程序支付之c#后台实现方法的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了 微信小程序页面生命周期的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了Javascript基础知识中关于内置对象的相关知识的相关资料,需要的朋友可以参考下面小编薇大家带来的精彩文章2021-09-09
这篇文章主要为大家介绍了JavaScript适配器模式图解及使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了 关于JavaScript 中 if包含逗号表达式，有时会看到JavaScript中if判断里包含英文逗号 “,”，这个是其实是逗号表达式。在if条件里，只有最后一个表达式起判断作用。下面来看看文章的具体介绍吧2021-11-11
最新评论