微信小程序 action-sheet底部菜单详解


Posted in Javascript onOctober 27, 2016

微信小程序 action-sheet

action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件。可以在bindchange绑定的函数中控制菜单的显示。另外点击空白处时菜单也会隐藏。

官方文档

 微信小程序 action-sheet底部菜单详解

 .wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
  <block wx:for-items="{{actionSheetItems}}">
    <action-sheet-item bindtap="bind{{item}}">{{item}}</action-sheet-item>
  </block>
  <action-sheet-cancel >取消</action-sheet-cancel>
</action-sheet>

.js

var items = ['item1', 'item2', 'item3', 'item4']
var pageObject = {
 data: {
  actionSheetHidden: true,
  actionSheetItems: items
 },
 actionSheetTap: function(e) {
  console.log(this);
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  })
 },
 actionSheetChange: function(e) {
  this.setData({
   actionSheetHidden: !this.data.actionSheetHidden
  });
  console.log("点击ation-sheet-cancel,会触发action-sheet绑定的事件。在这里可以通过改变hidden控制菜单的隐藏");
 }
}

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底部菜单详解

如何让点击空白处时不隐藏图片呢?另外点击取消的时候自动隐藏菜单不就算了,非要自己写一句话让它隐藏,真麻烦。

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

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 #Javascript
微信小程序  modal弹框组件详解
Oct 27 #Javascript
从0开始学Vue
Oct 27 #Javascript
微信小程序  Mustache语法详细介绍
Oct 27 #Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 #Javascript
JavaScript登录验证码的实现
Oct 27 #Javascript
微信小程序  自定义创建详细介绍
Oct 27 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
如何隐藏你的.php文件
2007/01/04 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
JavaScript仿静态分页实现方法
2015/08/04 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
iView框架问题整理小结
2018/10/16 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
司法建议书范文
2014/05/13 职场文书
户外宣传策划方案
2014/05/25 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
本科应届生求职信
2014/08/05 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
简历中自我评价范文
2015/03/11 职场文书
小区保洁员岗位职责
2015/04/10 职场文书