微信小程序 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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
深入密码加salt原理的分析
2013/06/06 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
React实现全选功能
2020/08/25 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
销售类个人求职信范文
2013/09/25 职场文书
渡河少年教学反思
2014/02/12 职场文书
村党支部公开承诺书
2014/05/29 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
付款承诺函范文
2015/01/21 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
文化大革命观后感
2015/06/17 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python