微信小程序  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

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

相关文章

  • 微信小程序 http请求详细介绍

    微信小程序 http请求详细介绍

    这篇文章主要介绍了微信小程序 http请求详细介绍的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 页面传值详解

    微信小程序 页面传值详解

    这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • js 数组 fill() 填充方法

    js 数组 fill() 填充方法

    这篇文章主要介绍了js 数组 fill() 的填充方法,初始化数组的方法,但是初始化数组之后,数组中的每一项元素默认为 empty 空位占位,如何对数组这些空位添加默认的元素,ES6提供了 fill() 方法实现这一操作。本文总结数组 fill() 方法的详细使用,需要的朋友可以参考一下
    2021-10-10
  • JS前端常见的竞态问题解决方法详解

    JS前端常见的竞态问题解决方法详解

    这篇文章主要为大家介绍了JS前端常见的竞态问题解决方法详解,阅读完本文,你将会知道:什么是竞态问题;通常出现在哪些场景;解决竞态问题有哪些方法,希望能够有所帮助,祝大家多多进步,早日升职加薪的相关资料
    2022-08-08
  • 微信小程序 选项卡的简单实例

    微信小程序 选项卡的简单实例

    这篇文章主要介绍了微信小程序 选项卡的简单实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • JavaScript文档对象模型DOM

    JavaScript文档对象模型DOM

    这篇文章主要介绍了JavaScript文档对象模型DOM,当网页被加载时,浏览器会创建页面的文档对象模型,通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。下面来看看文章得详细内容,需要的朋友可以参考一下
    2021-11-11
  • uniapp封装canvas组件无脑绘制保存小程序分享海报

    uniapp封装canvas组件无脑绘制保存小程序分享海报

    这篇文章主要为大家介绍了uniapp封装canvas组件和方法无脑绘制并保存小程序分享海报实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 POST请求(网络请求)详解及实例代码

    微信小程序 POST请求(网络请求)详解及实例代码

    这篇文章主要介绍了微信小程序 POST请求(网络请求)详解及实例代码的相关资料,需要的朋友可以参考下
    2016-11-11
  • JavaScript取消请求方法

    JavaScript取消请求方法

    这篇文章主要为大家介绍了JavaScript取消请求方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • typeScript 泛型使用和泛型接口结合

    typeScript 泛型使用和泛型接口结合

    本篇文章主要介绍 typeScript 中新增的泛型概念、泛型使用、泛型与接口结合等内容。具有一定的参价值,需要的小伙伴可以参考一下,希望对你有所帮助
    2022-02-02

最新评论