文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 204
阅读 74
收藏 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
微信小程序开放公测,企业、政府及媒体可申请

11 月 3 日晚间,微信团队对外宣布,微信小程序开放公测,开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布。 根据微信团队的介绍,开放注册范围为企业、政府、媒...

局长
2016/11/03
3.5K
15
微信小程序插件 - 开发教程

昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现。 这篇文章,我将会带大家,从0开始,学习如何开发和...

理工男海哥
03/14
554
0
微信小程序第二次更新:增加 19 个接口

昨天晚上,微信小程序发布了第二次更新,详细更新项请见下方。微信公众号“骑行西藏”创始人 tao 表示此次更新“大幅度优化了编辑体验”。 更新概述 新增 19 个全新的 API (目前可以在开发工...

局长
2016/10/28
15K
14

没有更多内容

加载失败,请刷新页面

加载更多

搭建git服务器————gitlab

github毕竟是公开的,而私有仓库又得花钱买。所以我们可以想办法搭建一个私有的,只自己公司使用的。Gitlab是个不错的选择。在介绍它之前,先讲述一下命令行的git服务器 找一台服务器,首先要...

chencheng-linux
13分钟前
2
0
用Redis实现“秒杀”系统

导论 曾经被问过好多次怎样实现秒杀系统的问题。昨天又在CSDN架构师微信群被问到了。因此这里把我设想的实现秒杀系统的价格设计分享出来。供大家参考。 秒杀系统的架构设计 秒杀系统,是典型...

小刀爱编程
27分钟前
7
0
GO redis 相关操作

在gopath 目录下安装 go get github.com/garyburd/redigo/redis package mainimport ("fmt""github.com/garyburd/redigo/redis")//定义一个全局链接池变量var pool *redis.Pool//......

汤汤圆圆
今天
20
0
java8性特性,常用的lambda表达式

1、抽取多个对象中的某个属性,用数组接收 List<Student> students = new ArrayList<>(); List<String> names =students.stream().map(Student::getName).collect(Collectors.toList()); 2、......

Boss-x
今天
19
0
flutter 子组件与父组件

无论是子组件还是父组件,任何时候initState()只执行一次,如果需要判断 就在build里面进行,不然无效的。

大灰狼wow
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部