微信小程序下拉菜单效果的实例代码


Posted in Javascript onMay 14, 2019

微信小程序下拉菜单效果的实例代码

//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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
Use Word to Search for Files
Jun 15 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
vue多个元素的样式选择器问题
Nov 29 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 #Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 #Javascript
vue如何获取自定义元素属性参数值的方法
May 14 #Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 #Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
一道关于php变量引用的面试题
2010/08/08 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python sorted函数原理解析及练习
2020/02/10 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python-openCV开运算实例
2020/07/05 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
个人房屋买卖协议书(范本)
2014/10/04 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
python中tkinter复选框使用操作
2021/11/11 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA