文档章节

微信小程序把玩(二十二)action-sheet组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 204
阅读 58
收藏 0

这里写图片描述

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(){
    // 页面关闭
  }
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52670966

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
一款开源微信小程序APP(商超营销类)

项目介绍 这是一款主打门店营销的小程序。包括首页、门店、营销、个人设置、登录、数据统计展示、营销设置等。 本来要独立完成整个项目,包括前后端一套的,有些意外因素,项目临时收尾。 管...

杨超凡
08/24
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
微信小程序开发框架从入门到放弃

用框架是不可能用框架的,这辈子都不可能用框架。 微信小程序上手成本低,开发成本低,流量红利,推广成本低等等,很多公司的创业项目都会首选小程序来试水,小程序开发太火爆了,苦逼了前端工...

Runner羊
07/24
0
0
微信小程序selectComponent获取自定义子组件

一、微信小程序中父组件获取子组件对象方法 1.selectComponent,返回选择器的第一个组件 2.selectAllComponents,返回选择器的组件列表 参数为选择器。 使用示例:...

tianma3798
10/16
0
0
迅速上手:使用taro构建微信小程序基础教程

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用t...

mytac
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java动态代理之InvocationHandler最简单的入门教程

网上关于Java的动态代理,Proxy和InvocationHandler这些概念有讲解得非常高深的文章。其实这些概念没有那么复杂。现在咱们通过一个最简单的例子认识什么是InvocationHandler。值得一提的是,...

JerryWang_SAP
18分钟前
0
0
oracle 在 MyBatis 中使用 like

两种使用方法 使用oracle自带 || 拼凑的方式 <if test="userName!=null and userName!=''"> AND u.USER_NAME like '%' || #{userName} || '%' </if> 使用MyBatis的$符号的方式 <if test="us......

karma123
24分钟前
1
0
带接口的webservice方式发布

package cn.it.ws.e;import javax.jws.WebService;/** * 面向接口的webservice发布方式 * @author Administrator * */@WebServicepublic interface JobService {publi...

江戸川
40分钟前
2
0
day122-20181020-英语流利阅读-待学习

蜘蛛侠新片《毒液》来袭!导演灵感来自哪? Roxy 2018-10-20 1.今日导读 你还记得漫威宇宙中飞檐走壁的蜘蛛侠小可爱吗?在刚过去的国庆黄金周里,索尼影业发行的漫威超级英雄蜘蛛侠系列大片《...

飞鱼说编程
50分钟前
4
0
美团点评Docker容器管理平台

美团点评容器平台简介 本文介绍美团点评的Docker容器集群管理平台(以下简称“容器平台”)。该平台始于2015年,是基于美团云的基础架构和组件而开发的Docker容器集群管理平台。目前该平台为...

Skqing
56分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部