微信小程序(二十二)action-sheet组件详细介绍

 更新时间:2016年09月27日 17:21:37   作者:顺子_RTFSC  
这篇文章主要介绍了微信小程序action-sheet组件详细介绍的相关资料,需要的朋友可以参考下

action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件

主要属性:

wxml

<!--触发action-sheet事件-->
<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>
<!--默认action-sheet为隐藏,由button触发-->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" >

 <block wx:for-items="{{actionSheetItems}}" > 
  <action-sheet-item >{{item}}</action-sheet-item>
 </block>
 <!--自动隐藏action-sheet-->
 <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

js

Page({
 data:{
 // text:"这是一个页面"
 actionSheetHidden: true,
 actionSheetItems: ['item1', 'item2', 'item3']

 },

 listenerButton: function() {
  this.setData({
  //取反
   actionSheetHidden: !this.data.actionSheetHidden
  });
 },

 listenerActionSheet:function() {
 this.setData({
  actionSheetHidden: !this.data.actionSheetHidden
 })
 },


 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

相关文章:

hello WeApp                      icon组件
Window 
                            text组件                                switch组件
tabBar底部导航                 progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期
                    checkbox组件                       toast组件
模块化详                           form组件详                            loading 组件
数据绑定
                           input 组件                             navigator 组件
View组件                          picker组件                             audio 组件
scroll-view组件                 radio组件                              video组件
swiper组件                        slider组件                              Image组件

相关文章

  • 微信小程序 教程之小程序配置

    微信小程序 教程之小程序配置

    这篇文章主要介绍了微信小程序 教程之小程序配置的相关资料,这里对app.json,pages,window等做了详细介绍,对于初学开发微信小程序的朋友,掌握这些还是比较重要的,需要的朋友可以参考下
    2016-10-10
  • 使用async await处理错误方法示例

    使用async await处理错误方法示例

    这篇文章主要为大家介绍了使用async await处理错误的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 详解JavaScript中数组的相关知识

    详解JavaScript中数组的相关知识

    这篇文章主要介绍了JavaScript中中数组的相关知识,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-07
  • 一个很简单的办法实现TD的加亮效果.

    一个很简单的办法实现TD的加亮效果.

    一个很简单的办法实现TD的加亮效果....
    2006-06-06
  • 关于js typeof 与 instanceof 判断数据类型区别及开发使用

    关于js typeof 与 instanceof 判断数据类型区别及开发使用

    我们经常会遇到判断一个变量的数据类型或该变量是否为空值的情况,你是如何去选择判断类型操作符的?本文来记录一下我们开发人员必须掌握关于 typeof 和 instanceof 的知识点及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题,需要的朋友可参考下文章内容
    2021-10-10
  • 浅谈JavaScript作用域

    浅谈JavaScript作用域

    这篇文章主要介绍了JavaScript作用域详情,作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突,下面文章我们一起来了解更多的详细内容,需要的小伙伴也可以参考一下
    2021-12-12
  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据

    这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下
    2017-01-01
  • fabric.js图层功能独立显隐 添加 删除 预览实现详解

    fabric.js图层功能独立显隐 添加 删除 预览实现详解

    这篇文章主要为大家介绍了fabric.js图层功能独立显隐 添加 删除 预览实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序 (一)新建项目hello WeApp 详细介绍

    微信小程序 (一)新建项目hello WeApp 详细介绍

    这篇文章主要介绍了微信小程序 (一)hello WeApp 详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • Web Animations API实现一个精确计时的时钟示例

    Web Animations API实现一个精确计时的时钟示例

    这篇文章主要为大家介绍了Web Animations API实现一个精确计时的时钟示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论