微信小程序 WXDropDownMenu组件详解及实例代码


Posted in Javascript onOctober 24, 2016

微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解,

功能: 适用于商品列表筛选与功能菜单跳转

先来看下效果图:

微信小程序 WXDropDownMenu组件详解及实例代码

思路与步骤:

布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单。

1.使用dt做出第一级菜单

2.使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层

/*总菜单容器*/
.menu {
   display: block;
  height: 38px;
}

/*一级菜单*/
.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;
}

/*二级菜单外部容器样式*/
.menu dd{
  position: absolute;
  width: 100%;
  /*hack*/
  top:39px;
  left:0;
  z-index:999;
}

/*二级菜单普通样式*/
.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;
}

查看效果,接下来实现点击事件。

如图

微信小程序 WXDropDownMenu组件详解及实例代码

3.dt绑定点击事件tapMainMenu,flag控制显隐toggle,提供2个class,hidden与show,来控制显隐。注:dt也是可以bindTap的,不单是view。

/* 显示与隐藏 */
.show {
  display: block;
}

.hidden {
  display: none;
}

4.关闭所有一级菜单,每个一级菜单都有一个index标识,由tapMainMenu事件传递过去,与数组subMenuDisplay一一对应,当前元素subMenuDisplay[index]视原来状态决定是显示或隐藏。

核心代码:

<dl class="menu">
  <dt data-index="0" bindtap="tapMainMenu">价格</dt>
  <dd class="{{subMenuDisplay[0]}}">
    <ul><li>sub1</li><li>sub2</li></ul>
  </dd>
</dl>
// 使用function初始化array,相比var initSubMenuDisplay = [] 既避免的引用复制的,同时方式更灵活,将来可以是多种方式实现,个数也不定的
function initSubMenuDisplay() {
  return ['hidden', 'hidden', 'hidden'];
}

Page({
  data:{
    subMenuDisplay:initSubMenuDisplay()
  },
  tapMainMenu: function(e) {
//    获取当前显示的一级菜单标识
    var index = parseInt(e.currentTarget.dataset.index);
    // 生成数组,全为hidden的,只对当前的进行显示
    var newSubMenuDisplay = initSubMenuDisplay();
//    如果目前是显示则隐藏,反之亦反之。同时要隐藏其他的菜单
    if(this.data.subMenuDisplay[index] == 'hidden') {
      newSubMenuDisplay[index] = 'show';
    } else {
      newSubMenuDisplay[index] = 'hidden';
    }
    // 设置为新的数组
    this.setData({
      subMenuDisplay: newSubMenuDisplay
    });
  }
});

5.选中二级菜单当前项,但给个系统icon及改变背景色,文本加粗,同样改变一级菜单标题,demo中给出一个弹窗

声明tapSubMenu方法,监听二级点击事件

tapSubMenu: function(e) {
    //    获取当前显示的一级菜单标识
    var index = parseInt(e.currentTarget.dataset.index);
    console.log(index);
    // 隐藏所有一级菜单
    this.setData({
      subMenuDisplay: initSubMenuDisplay()
    });
  }

加highlight效果

/*二级菜单高亮样式*/
.menu li.highlight{
  background-color: #f4f4f4;
}

与一级菜单不同,使用二维数组的方式实现点击高亮,这样才能定位到是某一级的某二级菜单,再决定显示隐藏。 布局文件改成:

<dd class="{{subMenuDisplay[0]}}">
    <ul>
      <li class="{{subMenuHighLight[0][0]}}" data-index="0-0" bindtap="tapSubMenu">100以内</li>
      <li class="{{subMenuHighLight[0][1]}}" data-index="0-1" bindtap="tapSubMenu">100-500</li>
      <li class="{{subMenuHighLight[0][2]}}" data-index="0-2" bindtap="tapSubMenu">500-1000</li>
      <li class="{{subMenuHighLight[0][3]}}" data-index="0-3" bindtap="tapSubMenu">1000-3000</li>
      <li class="{{subMenuHighLight[0][4]}}" data-index="0-4" bindtap="tapSubMenu">3000以上</li>
    </ul>
  </dd>

效果如图

微信小程序 WXDropDownMenu组件详解及实例代码

相应的js代码要写成:

//声明初始化高亮状态数组

function initSubMenuHighLight() {
  return [
    ['','','','',''],
    ['',''],
    ['','','']
  ];
}

点击事件

tapSubMenu: function(e) {
    // 隐藏所有一级菜单
    this.setData({
      subMenuDisplay: initSubMenuDisplay()
    });
    // 处理二级菜单,首先获取当前显示的二级菜单标识
    var indexArray = e.currentTarget.dataset.index.split('-');
    console.log("indexArray : " + indexArray);
    var newSubMenuHighLight = initSubMenuHighLight();
    // 与一级菜单不同,这里不需要判断当前状态,只需要点击就给class赋予highlight即可
    newSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';
    console.log(newSubMenuHighLight);
    // 设置为新的数组
    this.setData({
      subMenuHighLight: newSubMenuHighLight
    });
  }

这样就实现了高亮与取消高亮。但还没完,与一级菜单不同,这里与兄弟子菜单是非互斥的,也就是说点击了本菜单,是不能一刀切掉兄弟菜单的高亮状态的。于是我们改进js代码。

声明方式,改用变量形式,方便存储。

//定义初始化数据,用于运行时保存
var initSubMenuHighLight = [
    ['','','','',''],
    ['',''],
    ['','','']
  ];

点击事件

tapSubMenu: function(e) {
    // 隐藏所有一级菜单
    this.setData({
      subMenuDisplay: initSubMenuDisplay()
    });
    // 处理二级菜单,首先获取当前显示的二级菜单标识
    var indexArray = e.currentTarget.dataset.index.split('-');
    // 初始化状态
    // var newSubMenuHighLight = initSubMenuHighLight;
    for (var i = 0; i < initSubMenuHighLight.length; i++) {
      // 如果点中的是一级菜单,则先清空状态,即非高亮模式,然后再高亮点中的二级菜单;如果不是当前菜单,而不理会。经过这样处理就能保留其他菜单的高亮状态
      if (indexArray[0] == i) {
        for (var j = 0; j < initSubMenuHighLight[i].length; j++) {
          // 实现清空
          initSubMenuHighLight[i][j] = '';
        }
        // 将当前菜单的二级菜单设置回去
      }
    }

    // 与一级菜单不同,这里不需要判断当前状态,只需要点击就给class赋予highlight即可
    initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';
    // 设置为新的数组
    this.setData({
      subMenuHighLight: initSubMenuHighLight
    });
  }

有待完善功能点:

1.显示与隐藏带动画下拉

2.抽象化,使用回调函数,将监听每个二级菜单的点击

3.数据源与显示应当是分离的,一级与二级菜单的key value应该是独立在外,系统只认index,然后对相应点击作处理,跳转页面,筛选结果等

4.点击二级菜单时,会将全部组的清除,有待修复

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
JSON格式化输出
Nov 10 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
angular.bind使用心得
Oct 26 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
微信小程序 购物车简单实例
Oct 24 #Javascript
Select2.js下拉框使用小结
Oct 24 #Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
给php新手谈谈我的学习心得
2007/02/25 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python语言的12个基础知识点小结
2014/07/10 Python
python复制与引用用法分析
2015/04/08 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python中print和return的作用及区别解析
2019/05/05 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
专科应届生求职信
2013/11/24 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
学生个人评语大全
2015/01/04 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
nginx配置限速限流基于内置模块
2022/05/02 Servers