微信小程序 下拉菜单简单实例


Posted in Javascript onApril 13, 2017

微信小程序 下拉菜单简单实例

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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 #Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 #Javascript
You might like
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
子页向父页传值示例
2013/11/27 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
有趣的python小程序分享
2017/12/05 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
搞笑创意广告语
2014/03/17 职场文书
检讨书范文1000字
2015/01/28 职场文书
社区党支部承诺书
2015/04/29 职场文书
房屋维修申请报告
2015/05/18 职场文书
2016春季运动会前导词
2015/11/25 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL