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


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 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
Javascript中神奇的this
Jan 20 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
vue 中filter的多种用法
Apr 26 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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
再说下636单管机
2021/03/02 无线电
15个小时----从修改程序到自己些程序
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python协程之动态添加任务的方法
2019/02/19 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
如何通过python检查文件是否被占用
2020/12/18 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
高中升旗仪式演讲稿
2014/09/09 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
早会开场白台词大全
2015/06/01 职场文书
工作会议简报
2015/07/20 职场文书
工作自我评价范文
2019/03/21 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python