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


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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
vue axios整合使用全攻略
May 24 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
AngularJS入门教程之Hello World!
2014/12/06 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
安全标准化实施方案
2014/02/20 职场文书
目标责任书范文
2014/04/14 职场文书
预备党员综合考察材料
2014/05/31 职场文书
电影地道战观后感
2015/06/04 职场文书
欠条范文
2015/07/03 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL