秀杰实战教程系列《三》：下拉筛选菜单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;

}

查阅效果，接下来同时实现页面事件。

3.dt存取页面事件tapMainMenu，flag掌控显隐toggle，提供更多2个class,hidden与show，去掌控显隐。备注：dt也就是可以bindTap的，不单是view。

/* 表明与暗藏 */

.show {

display: block;

}

.hidden {

display: none;

}

4.停用所有一级菜单，每个一级菜单都存有一个index标识，由tapMainMenu事件传达过去，与数组subMenuDisplay一一对应，当前元素subMenuDisplay[index]视原来状态同意就是表明或暗藏。

核心代码：

价格

• sub1
• sub2

// 采用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;

}

与一级菜单相同，采用二维数组的方式同时实现页面高亮，这样就可以定位至就是某一级的某二级菜单，再同意表明暗藏。 布局文件换成：

效果例如图

适当的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

});

}

这样就同时实现了CT8325BBP与中止高亮。但还没用，与一级菜单相同，这里与兄弟子菜单不为不相容的，也就是说页面了本菜单，就是无法一刀切掉兄弟菜单的CT8325BBP状态的。于是我们改良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++) {

// 如果Behren的就是一级菜单，则先清空状态，即非CT8325BBP模式，然后再低亮点中的二级菜单；如果不是当前菜单，而不理会。经过这样处置就能够留存其他菜单的CT8325BBP状态

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.页面二级菜单时，可以将全部组的去除，尚待复原