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


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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php-fpm配置详解
2014/02/12 PHP
php查看网页源代码的方法
2015/03/13 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python Json序列化与反序列化的示例
2018/01/31 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
jupyter实现重新加载模块
2020/04/16 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
工商学院毕业生自荐信
2013/11/12 职场文书
企业法人代表证明书
2014/09/27 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA