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


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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
js有序数组的连接问题
Oct 01 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
js module大战
Apr 19 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 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
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
python排序方法实例分析
2015/04/30 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
DIY手工制作经营店创业计划书
2014/02/01 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
爱护公共设施标语
2014/06/24 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年共青团工作总结
2015/05/15 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
给校长的建议书范文
2015/09/14 职场文书