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


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 相关文章推荐
学习JavaScript的最佳方法分享
Oct 21 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
微信小程序五星评分效果实现代码
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
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
什么是JavaScript
2009/08/13 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
社区安全检查制度
2014/02/03 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
文明倡议书范文
2014/04/15 职场文书
保密工作整改报告
2014/11/06 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
工程主管竞聘书
2015/09/15 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技