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


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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
Js经典案例的实例代码
May 10 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
django中静态文件配置static的方法
2018/05/20 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python如何生成各种随机分布图
2018/08/27 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现的汉诺塔算法示例
2019/10/23 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python实现无边框进度条的实例代码
2020/12/30 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
致裁判员加油稿
2014/02/08 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
优秀新员工事迹材料
2019/05/13 职场文书