Beispiel für ein WeChat-Miniprogramm-Dropdown-Menü, ein früher Anwender der Miniprogrammproduktion. Das Entwicklungstool ist Version 0.9, aber die Ideen und Prinzipien sind dieselben und es eignet sich sehr gut für den Einstieg in das WeChat-Miniprogramm.

Ideen und Schritte für das Dropdown-Menü des WeChat-Miniprogramms:

In Bezug auf das Layout wird dl insgesamt zum Schreiben verwendet. und das sekund?re Paket befindet sich in dd. Verwenden Sie zum Schreiben ul li. Klicken Sie auf ein bestimmtes Ebenenmenü, um die Geschwister-Untermenüs zu schlie?en, und klicken Sie auf ein bestimmtes Untermenü, um alle Menüs zu schlie?en.

1. Verwenden Sie dt, um das Menü der ersten Ebene zu erstellen.

2. Verwenden Sie dd, um das Menü der zweiten Ebene zu verschachteln, zun?chst ausgeblendet, die Position ist absolut , verwenden Sie Z-Index, um die Seitenebene

/*總菜單容器*/
.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;
}

aufzurufen, um den Effekt zu überprüfen, und implementieren Sie dann das Klickereignis.

Wie im Bild gezeigt

3.dt bindet das Klickereignis tapMainMenu, das Flag steuert das Umschalten zwischen Anzeigen und Ausblenden und stellt zwei Klassen bereit, versteckt und show, um die Anzeige ausgeblendet zu steuern. Hinweis: dt kann auch bindTap und nicht nur anzeigen.

/* 顯示與隱藏 */
.show {
   display: block;
}
.hidden {
 display: none;
}web前端開(kāi)發(fā)http://www.51xuediannao.com/

4. Schlie?en Sie alle Menüs der ersten Ebene. Jedes Menü der ersten Ebene verfügt über eine Indexkennung, die vom Ereignis tapMainMenu übergeben wird und dem Array subMenuDisplay eins zu eins entspricht subMenuDisplay[index] wird als Originalzustand betrachtet. Die Entscheidung besteht darin, anzuzeigen oder auszublenden.

Kerncode:

<dl class="menu">
    <dt data-index="0" bindtap="tapMainMenu">價(jià)格</dt>
    <dd class="{{subMenuDisplay[0]}}">
        <ul><li>sub1</li><li>sub2</li></ul>
    </dd>
</dl>
//使用function初始化array，相比var initSubMenuDisplay = [] 既避免的引用復(fù)制的，同時(shí)方式更靈活，將來(lái)可以是多種方式實(shí)現(xiàn)，個(gè)數(shù)也不定的
function initSubMenuDisplay() { 
     return [&#39;hidden&#39;, &#39;hidden&#39;, &#39;hidden&#39;];
}
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] == &#39;hidden&#39;) {
            newSubMenuDisplay[index] = &#39;show&#39;;
        } else {
            newSubMenuDisplay[index] = &#39;hidden&#39;;
        }        // 設(shè)置為新的數(shù)組
        this.setData({
            subMenuDisplay: newSubMenuDisplay
        });
    }
});

5. W?hlen Sie das aktuelle Element des Menüs der zweiten Ebene aus, geben Sie jedoch ein Systemsymbol ein und ?ndern Sie die Hintergrundfarbe, machen Sie den Text fett und ?ndern Sie ihn ebenfalls der Menütitel der ersten Ebene, in der Demo ein Popup-Fenster erstellen

Deklarieren Sie die tapSubMenu-Methode und warten Sie auf sekund?re Klickereignisse

//獲取當(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;}

Anders als beim Menü der ersten Ebene, a Ein zweidimensionales Array wird verwendet, um die Klickhervorhebung zu implementieren, damit es lokalisiert werden kann. Es handelt sich um ein bestimmtes sekund?res Menü einer bestimmten Ebene, und dann wird entschieden, es anzuzeigen oder auszublenden. ?ndern Sie die Layoutdatei in:

 <dd class="{{subMenuDisplay[0]}}">
        <ul>
            <li class="{{subMenuHighLight[0][0]}}" data-index="0-0" bindtap="tapSubMenu">100以?xún)?nèi)</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>

Der Effekt ist wie in der Abbildung gezeigt

Der entsprechende js-Code sollte wie folgt geschrieben werden:

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

Klickereignis

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
        });
    }

Dadurch wird das Hervorheben und Aufheben der Hervorhebung erreicht. Aber es ist noch nicht vorbei. Im Gegensatz zum Menü der ersten Ebene schlie?t sich dies nicht gegenseitig aus. Das hei?t, durch Klicken auf dieses Menü kann der Hervorhebungsstatus der Geschwistermenüs nicht aufgehoben werden. Deshalb haben wir den js-Code verbessert.

Deklarationsmethode, verwenden Sie stattdessen die Variablenform zur bequemen Speicherung.

//定義初始化數(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(&#39;-&#39;);        // 初始化狀態(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)過(guò)這樣處理就能保留其他菜單的高亮狀態(tài)            if (indexArray[0] == i) {                for (var j = 0; j < initSubMenuHighLight[i].length; j++) {                    // 實(shí)現(xiàn)清空                    initSubMenuHighLight[i][j] = &#39;&#39;;                }                // 將當(dāng)前菜單的二級(jí)菜單設(shè)置回去            }        }        // 與一級(jí)菜單不同，這里不需要判斷當(dāng)前狀態(tài)，只需要點(diǎn)擊就給class賦予highlight即可        initSubMenuHighLight[indexArray[0]][indexArray[1]] = &#39;highlight&#39;;        // 設(shè)置為新的數(shù)組        this.setData({            subMenuHighLight: initSubMenuHighLight        });    }

Zu verbessernde Funktionspunkte:

1. Animiertes Dropdown-Menü ein- und ausblenden

2. Abstraktion überwacht mithilfe der Rückruffunktion jeden Klick im sekund?ren Menü

3. Die Datenquelle und die Anzeige sollten voneinander getrennt sein. Das System erkennt nur den Index und verarbeitet dann den entsprechenden Klick die Seite und Filter Ergebnisse warten

4. Wenn Sie auf das sekund?re Menü klicken, werden alle Gruppen gel?scht und müssen repariert werden

Das obige ist der detaillierte Inhalt vonDetaillierte Schritte zum Erstellen von Dropdown-Menüs in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!