微信小程序 下拉菜单的实现


Posted in Javascript onApril 06, 2017

微信小程序 下拉菜单

看下实现效果图:

微信小程序 下拉菜单的实现

实例:

//wcss 
/**DropDownMenu**/ 
 
/*总菜单容器*/ 
 
.menu { 
 display: block; 
 height: 28px; 
 position: relative; 
} 
 
/*一级菜单*/ 
 
.menu dt { 
 font-size: 15px; 
 float: left; 
 /*hack*/ 
 width: 33%; 
 height: 38px; 
 border-right: 1px solid #d2d2d2; 
 border-bottom: 1px solid #d2d2d2; 
 text-align: center; 
 background-color: #f4f4f4; 
 color: #5a5a5a; 
 line-height: 38px; 
 z-index: 2; 
} 
 
/*二级菜单外部容器样式*/ 
 
.menu dd { 
 position: absolute; 
 width: 100%; 
 margin-top: 40px; 
 left: 0; 
 z-index: -99; 
} 
 
/*二级菜单普通样式*/ 
 
.menu li { 
 font-size: 14px; 
 line-height: 34px; 
 color: #575757; 
 height: 34px; 
 display: block; 
 padding-left: 8px; 
 background-color: #fff; 
 border-bottom: 1px solid #dbdbdb; 
} 
 
/*二级菜单高亮样式*/ 
 
.menu li.highlight { 
 background-color: #f4f4f4; 
 color: #48c23d; 
} 
 
/* 显示与隐藏 */ 
 
.show { 
 /*display: block;*/ 
 visibility: visible; 
} 
 
.hidden { 
 /*display: none;*/ 
 visibility: hidden; 
}
//wxml  
<dl class="menu"> 
  <block wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu"> 
   <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt> 
   <dd class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}"> 
    <ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil"> 
     <li class="{{subMenuHighLight[idMenu][idChil]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}">{{chilItem.Name}}</li> 
    </ul> 
    <picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12"> 时间:{{dateValue}}</picker> 
   </dd> 
  </block> 
</dl>

JS 代码:

//js 
//数据源 
var ReportDataSync = [ 
  { 
    reportType: "日报1", 
    chilItem: [ 
      { ID: 1, Name: "日报1", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 2, Name: "日报2", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 3, Name: "日报3", ReportUrl: "DailyReport.aspx", Type: 1 }] 
  }, 
  { 
    reportType: "目录2", 
    chilItem: [ 
      { ID: 1, Name: "目录1", ReportUrl: "DailyReport.aspx", Type: 2 }, 
      { ID: 2, Name: "目录2", ReportUrl: "DailyReport.aspx", Type: 2 }, 
      { ID: 3, Name: "目录3", ReportUrl: "DailyReport.aspx", Type: 2 }, 
      { ID: 4, Name: "目录4", ReportUrl: "DailyReport.aspx", Type: 2 }] 
  }, 
  { 
    reportType: "月报3", 
    chilItem: [ 
      { ID: 1, Name: "月报1", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 2, Name: "月报2", ReportUrl: "DailyReport.aspx", Type: 2 }] 
  } 
] 
 
//定义字段 
var initSubMenuDisplay = []  
var initSubMenuHighLight = [] 
 
/// 初始化DropDownMenu 
loadDropDownMenu() 
 
that.setData({ 
  reportData: ReportDataSync,//菜单数据 
  subMenuDisplay: initSubMenuDisplay, //一级 
  subMenuHighLight: initSubMenuHighLight //二级 
}) 
 
 
 
//一级菜单点击 
tapMainMenu: function (e) { 
  //获取当前一级菜单标识 
  var index = parseInt(e.currentTarget.dataset.index); 
  //改变显示状态 
  for (var i = 0; i < initSubMenuDisplay.length; i++) { 
    if (i == index) { 
      if (this.data.subMenuDisplay[index] == "show") { 
        initSubMenuDisplay[index] = 'hidden' 
      } else { 
        initSubMenuDisplay[index] = 'show' 
      } 
    } else { 
      initSubMenuDisplay[i] = 'hidden' 
    } 
  } 
  this.setData({ 
    subMenuDisplay: initSubMenuDisplay 
  }) 
}, 
 
//二级菜单点击 
tapSubMenu: function (e) { 
  //隐藏所有一级菜单 
  //this.setData({ 
  //subMenuDisplay: initSubMenuDisplay() 
  //}); 
  // 当前二级菜单的标识 
  var indexArray = e.currentTarget.dataset.index.split('-'); 
   // 删除所在二级菜单样式 
  for (var i = 0; i < initSubMenuHighLight.length; i++) { 
    if (indexArray[0] == i) { 
      for (var j = 0; j < initSubMenuHighLight[i].length; j++) { 
        initSubMenuHighLight[i][j] = ''; 
      } 
    } 
  } 
  //给当前二级菜单添加样式 
  initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; 
  //刷新样式 
  this.setData({ 
    subMenuHighLight: initSubMenuHighLight 
  }); 
} 
 
 
/// <summary> 
/// 初始化DropDownMenu 
/// 1.一级目录 initSubMenuDisplay :['hidden'] 
/// 2.二级目录 initSubMenuHighLight :[['',''],['','','','']]] 
/// </summary> 
function loadDropDownMenu() { 
  for (var i = 0; i < ReportDataSync.length; i++) { 
    //一级目录 
    initSubMenuDisplay.push('hidden') 
    //二级目录 
    var report = [] 
    for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) { 
      report.push(['']) 
    } 
    initSubMenuHighLight.push(report) 
  } 
}

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

Javascript 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
redux.js详解及基本使用
May 24 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
微信小程序五星评分效果实现代码
Apr 06 #Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 #Javascript
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
vue.js指令和组件详细介绍及实例
Apr 06 #Javascript
javascript闭包功能与用法实例分析
Apr 06 #Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
You might like
Twig模板引擎用法入门教程
2016/01/20 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
js判断手机系统是android还是ios
2017/03/07 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
python双向链表原理与实现方法详解
2019/12/03 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
东方电视购物:东方CJ
2016/10/12 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
幼儿园秋游感想
2014/03/12 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
廉洁自律个人总结
2015/02/14 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
反邪教观后感
2015/06/11 职场文书
光荣之路观后感
2015/06/12 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python