怎么制作微信小程序滑動下拉菜單?

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

　　

 

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

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

　　1.使用dt做出第一級菜單

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

　　/*總菜單容器*/

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

　　/*一級菜單*/

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

　　}

　　/*二級菜單外部容器樣式*/

　　.menu dd{ position: absolute;width: 100%;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;

　　}

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

　　如圖

　　

 

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

　　/* 顯示與隱藏 */

　　.show {

　　display: block;

　　}

　　.hidden {

　　display: none;

　　}

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

　　4.關閉所有一級菜單，每個一級菜單都有一個index標識，由tapMainMenu事件傳遞過去，與數(shù)組subMenuDisplay一一對應，當前元素subMenuDisplay[index]視原來狀態(tài)決定是顯示或隱藏。

　　核心代碼：

　　價格

　　sub1

　　sub2

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

　　function initSubMenuDisplay() {

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

　　}

　　Page({

　　data:{

　　subMenuDisplay:initSubMenuDisplay()

　　},

　　tapMainMenu: function(e) {// 獲取當前顯示的一級菜單標識

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

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

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

　　newSubMenuDisplay[index] = 'show';

　　} else {

　　newSubMenuDisplay[index] = 'hidden';

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

　　this.setData({

　　subMenuDisplay: newSubMenuDisplay

　　});

　　}

　　});

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

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

　　//獲取當前顯示的一級菜單標識

　　tapSubMenu: function(e) {

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

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

　　this.setData({

　　subMenuDisplay: initSubMenuDisplay()

　　});

　　}

　　加highlight效果

　　/*二級菜單高亮樣式*/

　　.menu li.highlight{

　　background-color: #f4f4f4;

　　}

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

　　100以內

　　100-500

　　500-1000

　　1000-3000

　　3000以上

　　效果如圖

　　

 

　　相應的js代碼要寫成：

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

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

　　['',''],

　　['','','']

　　];

　　}

　　點擊事件

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

　　this.setData({

　　subMenuDisplay: initSubMenuDisplay()

　　}); // 處理二級菜單，首先獲取當前顯示的二級菜單標識

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

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

　　this.setData({

　　subMenuHighLight: newSubMenuHighLight

　　});

　　}

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

　　聲明方式，改用變量形式，方便存儲。

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

　　var initSubMenuHighLight = [

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

　　['',''],

　　['','','']

　　];

　　點擊事件

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

　　this.setData({

　　subMenuDisplay: initSubMenuDisplay()

　　}); // 處理二級菜單，首先獲取當前顯示的二級菜單標識

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

　　// var newSubMenuHighLight = initSubMenuHighLight;

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

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

　　initSubMenuHighLight[i][j] = '';

　　} // 將當前菜單的二級菜單設置回去

　　}

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

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

　　this.setData({

　　subMenuHighLight: initSubMenuHighLight

　　});

　　}

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