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

 更新时间:2016年10月27日 10:08:58   投稿:lqh  
这篇文章主要介绍了微信小程序 action-sheet底部菜单详解的相关资料,并附实例代码,需要的朋友可以参考下

微信小程序 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绑定的函数中控制菜单的显示。另外点击空白处时菜单也会隐藏。

官方文档


 

 .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)

运行效果


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

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

相关文章

  • 强制设为首页代码

    强制设为首页代码

    强制设为首页代码...
    2006-06-06
  • Javascript中bind()方法绑定函数的使用与实现

    Javascript中bind()方法绑定函数的使用与实现

    这篇文章主要为大家介绍了Javascript中bind()方法绑定函数的使用与实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • nuxt.js 多环境变量配置

    nuxt.js 多环境变量配置

    这篇文章主要介绍了nuxt.js 多环境变量配置,一般在香米开发中会有三个环境开发环境也叫测试环境(test) 、RC环境也叫预发布环境(rc) 、线上环境(production) 下面来看看文章内容的详细介绍,需要的朋友可以参考一下
    2021-11-11
  • JavaScript前端面试组合函数

    JavaScript前端面试组合函数

    这篇文章主要为大家介绍了JavaScript前端面试组合函数详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • rollup打包引发对JS模块循环引用思考

    rollup打包引发对JS模块循环引用思考

    这篇文章主要为大家介绍了rollup打包引发的对JS模块循环引用的思考,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序后台解密用户数据实例详解

    微信小程序后台解密用户数据实例详解

    这篇文章主要介绍了 微信小程序后台解密用户数据实例详解的相关资料,需要的朋友可以参考下
    2017-06-06
  • 微信小程序下拉刷新界面的实现

    微信小程序下拉刷新界面的实现

    这篇文章主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
    2017-09-09
  • element弹窗表格的字体模糊bug解决

    element弹窗表格的字体模糊bug解决

    这篇文章主要为大家介绍了element弹窗表格的字体模糊bug解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 微信小程序  action-sheet详解及实例代码

    微信小程序 action-sheet详解及实例代码

    这篇文章主要介绍了微信小程序 action-sheet详解及实例代码的相关资料,需要的朋友可以参考下
    2016-11-11
  • 微信小程序 页面传参实例详解

    微信小程序 页面传参实例详解

    这篇文章主要介绍了微信小程序 页面传参实例详解的相关资料,这里对页面跳转及传递参数的功能做个小示例,帮助大家尽快上手,很简单,需要的朋友可以参考下
    2016-11-11

最新评论