微信小程序 下拉菜单简单实例


Posted in Javascript onApril 13, 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 

//数据源 
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 = [] 
var initAnimationData = [] 
 
/// 初始化DropDownMenu 
loadDropDownMenu() 
 
that.setData({ 
  reportData: ReportDataSync,//菜单数据 
  subMenuDisplay: initSubMenuDisplay, //一级 
  subMenuHighLight: initSubMenuHighLight, //二级 
   animationData: initAnimationData //动画 
}) 
 
 
 
//一级菜单点击 
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 
  }) 
    this.animation(index) 
}, 
 
//二级菜单点击 
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 
  }); 
   // 设置动画 
   this.animation(indexArray[0]); 
}, 
 
//菜单动画 
animation: function (index) { 
    // 定义一个动画 
   var animation = wx.createAnimation({ 
     duration: 400, 
    timingFunction: 'linear', 
  }) 
  // 是显示还是隐藏 
  var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1; 
  // 使之Y轴平移 
  animation.translateY(flag * ((initSubMenuHighLight[index].length + 1) * 38)).step(); 
  // 导出到数据,绑定给view属性 
   var animationStr = animation.export(); 
  // 原来的数据 
   var animationData = this.data.animationData; 
  animationData[index] = animationStr; 
  this.setData({ 
    animationData: animationData 
  }); 
} 
 
 
/// <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) 
       //动画 
    initAnimationData.push("") 
  } 
}

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

Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
微信小程序自动客服功能
Nov 02 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 #Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 #Javascript
You might like
深入php self与$this的详解
2013/06/08 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python中web框架的自定义创建
2019/09/08 Python
详解Python绘图Turtle库
2019/10/12 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
护理实习自我鉴定
2013/12/14 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
MySQL 聚合函数排序
2021/07/16 MySQL