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


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 解析json的代码
Dec 16 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Python实现控制台进度条功能
2016/01/04 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python3 map函数和filter函数详解
2019/08/26 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
机电专业毕业生求职信
2013/10/27 职场文书
法人授权委托书
2014/04/03 职场文书
体育之星事迹材料
2014/05/11 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
同志主要表现材料
2014/08/21 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL