微信小程序 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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
JavaScript window.location对象
Nov 14 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
canvas的神奇用法
2017/02/03 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python 旋转打印各种矩形的方法
2019/07/09 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
粗加工管理制度
2014/02/04 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
小学生新年寄语
2014/04/03 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书