怎么制作微信小程序滑動(dòng)下拉菜單?

　　滑動(dòng)下拉菜單是很常見的功能，微信小程序滑動(dòng)下拉菜單到底是什么樣的呢?你想看看微信小程序滑動(dòng)下拉菜單效果嗎?小編就特意準(zhǔn)備了怎么制作微信小程序滑動(dòng)下拉菜單?微信小程序滑動(dòng)下拉菜單教程與大家分享一下。

　　

 

　　微信小程序下拉菜單思路與步驟：

　　布局方面，整體使用dl來寫，二級(jí)包在dd中，用ul li來寫;交互方面，點(diǎn)擊某一級(jí)菜單，關(guān)閉兄弟子菜單，點(diǎn)擊某子菜單關(guān)閉所有菜單。

　　1.使用dt做出第一級(jí)菜單

　　2.使用dd嵌套第二級(jí)菜單，初始隱藏、position為absolute，使用z-index浮出頁面層

　　/*總菜單容器*/

　　.menu {display: block;height: 38px;}

　　/*一級(jí)菜單*/

　　.menu dt {

　　font-size: 15px;float:left;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;

　　}

　　/*二級(jí)菜單外部容器樣式*/

　　.menu dd{ position: absolute;width: 100%;top:39px; left:0;z-index:999;}

　　/*二級(jí)菜單普通樣式*/

　　.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;

　　}

　　查看效果，接下來實(shí)現(xiàn)點(diǎn)擊事件。

　　如圖

　　

 

　　3.dt綁定點(diǎn)擊事件tapMainMenu，flag控制顯隱toggle，提供2個(gè)class,hidden與show，來控制顯隱。注：dt也是可以bindTap的，不單是view。

　　/* 顯示與隱藏 */

　　.show {

　　display: block;

　　}

　　.hidden {

　　display: none;

　　}

　　web前端開發(fā)http://www.51xuediannao.com/

　　4.關(guān)閉所有一級(jí)菜單，每個(gè)一級(jí)菜單都有一個(gè)index標(biāo)識(shí)，由tapMainMenu事件傳遞過去，與數(shù)組subMenuDisplay一一對(duì)應(yīng)，當(dāng)前元素subMenuDisplay[index]視原來狀態(tài)決定是顯示或隱藏。

　　核心代碼：

　　價(jià)格

　　sub1

　　sub2

　　//使用function初始化array，相比var initSubMenuDisplay = [] 既避免的引用復(fù)制的，同時(shí)方式更靈活，將來可以是多種方式實(shí)現(xiàn)，個(gè)數(shù)也不定的

　　function initSubMenuDisplay() {

　　return ['hidden', 'hidden', 'hidden'];

　　}

　　Page({

　　data:{

　　subMenuDisplay:initSubMenuDisplay()

　　},

　　tapMainMenu: function(e) {// 獲取當(dāng)前顯示的一級(jí)菜單標(biāo)識(shí)

　　var index = parseInt(e.currentTarget.dataset.index); // 生成數(shù)組，全為hidden的，只對(duì)當(dāng)前的進(jìn)行顯示

　　var newSubMenuDisplay = initSubMenuDisplay();// 如果目前是顯示則隱藏，反之亦反之。同時(shí)要隱藏其他的菜單

　　if(this.data.subMenuDisplay[index] == 'hidden') {

　　newSubMenuDisplay[index] = 'show';

　　} else {

　　newSubMenuDisplay[index] = 'hidden';

　　} // 設(shè)置為新的數(shù)組

　　this.setData({

　　subMenuDisplay: newSubMenuDisplay

　　});

　　}

　　});

　　5.選中二級(jí)菜單當(dāng)前項(xiàng)，但給個(gè)系統(tǒng)icon及改變背景色，文本加粗，同樣改變一級(jí)菜單標(biāo)題，demo中給出一個(gè)彈窗

　　聲明tapSubMenu方法，監(jiān)聽二級(jí)點(diǎn)擊事件

　　//獲取當(dāng)前顯示的一級(jí)菜單標(biāo)識(shí)

　　tapSubMenu: function(e) {

　　var index = parseInt(e.currentTarget.dataset.index);

　　console.log(index); // 隱藏所有一級(jí)菜單

　　this.setData({

　　subMenuDisplay: initSubMenuDisplay()

　　});

　　}

　　加highlight效果

　　/*二級(jí)菜單高亮樣式*/

　　.menu li.highlight{

　　background-color: #f4f4f4;

　　}

　　與一級(jí)菜單不同，使用二維數(shù)組的方式實(shí)現(xiàn)點(diǎn)擊高亮，這樣才能定位到是某一級(jí)的某二級(jí)菜單，再?zèng)Q定顯示隱藏。 布局文件改成：

　　100以內(nèi)

　　100-500

　　500-1000

　　1000-3000

　　3000以上

　　效果如圖

　　

 

　　相應(yīng)的js代碼要寫成：

　　//聲明初始化高亮狀態(tài)數(shù)組function initSubMenuHighLight() { return [

　　['','','','',''],

　　['',''],

　　['','','']

　　];

　　}

　　點(diǎn)擊事件

　　tapSubMenu: function(e) { // 隱藏所有一級(jí)菜單

　　this.setData({

　　subMenuDisplay: initSubMenuDisplay()

　　}); // 處理二級(jí)菜單，首先獲取當(dāng)前顯示的二級(jí)菜單標(biāo)識(shí)

　　var indexArray = e.currentTarget.dataset.index.split('-'); console.log("indexArray : " + indexArray); var newSubMenuHighLight = initSubMenuHighLight(); // 與一級(jí)菜單不同，這里不需要判斷當(dāng)前狀態(tài)，只需要點(diǎn)擊就給class賦予highlight即可

　　newSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; console.log(newSubMenuHighLight); // 設(shè)置為新的數(shù)組

　　this.setData({

　　subMenuHighLight: newSubMenuHighLight

　　});

　　}

　　這樣就實(shí)現(xiàn)了高亮與取消高亮。但還沒完，與一級(jí)菜單不同，這里與兄弟子菜單是非互斥的，也就是說點(diǎn)擊了本菜單，是不能一刀切掉兄弟菜單的高亮狀態(tài)的。于是我們改進(jìn)js代碼。

　　聲明方式，改用變量形式，方便存儲(chǔ)。

　　//定義初始化數(shù)據(jù)，用于運(yùn)行時(shí)保存

　　var initSubMenuHighLight = [

　　['','','','',''],

　　['',''],

　　['','','']

　　];

　　點(diǎn)擊事件

　　tapSubMenu: function(e) { // 隱藏所有一級(jí)菜單

　　this.setData({

　　subMenuDisplay: initSubMenuDisplay()

　　}); // 處理二級(jí)菜單，首先獲取當(dāng)前顯示的二級(jí)菜單標(biāo)識(shí)

　　var indexArray = e.currentTarget.dataset.index.split('-'); // 初始化狀態(tài)

　　// var newSubMenuHighLight = initSubMenuHighLight;

　　for (var i = 0; i < initSubMenuHighLight.length; i++) { // 如果點(diǎn)中的是一級(jí)菜單，則先清空狀態(tài)，即非高亮模式，然后再高亮點(diǎn)中的二級(jí)菜單;如果不是當(dāng)前菜單，而不理會(huì)。經(jīng)過這樣處理就能保留其他菜單的高亮狀態(tài)

　　if (indexArray[0] == i) { for (var j = 0; j < initSubMenuHighLight[i].length; j++) { // 實(shí)現(xiàn)清空

　　initSubMenuHighLight[i][j] = '';

　　} // 將當(dāng)前菜單的二級(jí)菜單設(shè)置回去

　　}

　　} // 與一級(jí)菜單不同，這里不需要判斷當(dāng)前狀態(tài)，只需要點(diǎn)擊就給class賦予highlight即可

　　initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; // 設(shè)置為新的數(shù)組

　　this.setData({

　　subMenuHighLight: initSubMenuHighLight

　　});

　　}

　　以上就是怎么制作微信小程序滑動(dòng)下拉菜單?微信小程序滑動(dòng)下拉菜單教程,更多小程序資訊，請(qǐng)持續(xù)繼續(xù)關(guān)注Hi商學(xué)院。