应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

秀杰实战教程系列《三》:下拉筛选菜单WXDropDownMenu组件

发布时间:2024-01-01 00:00 浏览次数:42

先来看下效果图:


思路与步骤:


布局方面,整体采用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]视原来状态同意就是表明或暗藏。


核心代码:



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


}


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




  • 100以内

  • 100-500

  • 500-1000

  • 1000-3000

  • 3000以上



效果例如图


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

TAG标签:
阅读推荐