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


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 相关文章推荐
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
js密码强度实时检测代码
Mar 02 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
vue实现登陆登出的实现示例
2017/09/15 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
用python写asp详细讲解
2013/12/16 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python实现人脸签到系统
2020/04/13 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
2014年五四青年节演讲稿范文
2014/04/22 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
入股协议书范本
2014/11/01 职场文书
小组口号霸气押韵
2015/12/24 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
opencv检测动态物体的实现
2021/07/21 Python