微信小程序  action-sheet详解及实例代码

 更新时间:2016年11月09日 10:44:59   投稿:lqh  
这篇文章主要介绍了微信小程序 action-sheet详解及实例代码的相关资料,需要的朋友可以参考下

微信小程序 开发文档,相关文章:

微信小程序  action-sheet

微信小程序 modal

微信小程序 toast

微信小程序 loading

微信小程序  action-sheet

属性名 类型 默认值 说明
hidden Boolean true 是否隐藏
bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据

action-sheet-item

底部菜单表的子选项。

action-sheet-cancel

底部菜单表的取消按钮,和action-sheet-item的区别是,点击它会触发action-sheet的change事件,并且外观上会同它上面的内容间隔开来。

示例代码:

<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>
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)
action-sheet

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序之网络请求简单封装实例详解

    微信小程序之网络请求简单封装实例详解

    这篇文章主要介绍了微信小程序之网络请求简单封装实例详解的相关资料,需要的朋友可以参考下
    2017-06-06
  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    这篇文章主要介绍了微信小程序中button组件的边框设置的实例详解的相关资料,希望通过本文大家能够掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • 8个工程必备的JavaScript代码片段

    8个工程必备的JavaScript代码片段

    这篇文章小编主要给大家介绍是8个工程中必须必备的JavaScript代码片段,需要的小伙伴可以参考下面文章的具体内容,对你有用的话建议收藏哦
    2021-09-09
  • 微信小程序(十六)form组件详细介绍

    微信小程序(十六)form组件详细介绍

    这篇文章主要介绍了微信小程序form组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • JS 4个超级实用的小技巧 提升开发效率

    JS 4个超级实用的小技巧 提升开发效率

    JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧,在平时的工作中可以大大的缩短代码量和开发时间。,需要的朋友可以参考下面文章内容哟
    2021-09-09
  • js 实现文件上传样式详情

    js 实现文件上传样式详情

    这篇文章主要介绍了js 实现文件上传样式,下面文章举例说明js 是如何实现文件上传样式的,附有代码详细解说,需要的朋友可以参考一下,希望对你有所帮助
    2021-10-10
  • 关于JavaScript防抖与节流的区别与实现

    关于JavaScript防抖与节流的区别与实现

    这篇文章主要介绍关于JavaScript防抖与节流的区别与实现,防抖就是用户多次触发事件,在用户一直触发事件中,事件不会执行,只有在用户停止触发事件一段时间之后再执行这个事件一次,二节流是用户多次触发事件,具体详情一i起来学习下面文章内容吧
    2021-10-10
  • JavaScript基本语法讲解

    JavaScript基本语法讲解

    这篇文章主要介绍了JavaScript的基本语法,包括注释和书写格式等基本知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript代码不能被阻断的稳定性建设

    JavaScript代码不能被阻断的稳定性建设

    这篇文章主要为大家介绍了JavaScript代码不能被阻断的稳定性建设详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • async-validator实现原理源码解析

    async-validator实现原理源码解析

    这篇文章主要为大家介绍了async-validator实现原理源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论