Das WeChat-Miniprogramm erstellt eine Bestellfunktion für Menüs zum Mitnehmen

Dieses Mal bringe ich Ihnen das WeChat-Applet zum Erstellen einer Bestellfunktion für das Mitnehmen. Was sind die Vorsichtsmaßnahmen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1 Die Funktion ist nur ein Teil der Menüfunktion, nur als Referenz

2. die Gerichte links Die ausgewählte Kategorie entspricht der Kategorie der Gerichte in der ersten Zeile rechts.

Meine Implementierungsmethode: (Höhe jedes Gerichts * Anzahl der Gerichte in dieser Kategorie) + Höhe der Gerichtskategorie = x. Bestimmen Sie bei jedem Scrollen, ob das aktuelle ScrollTop im Bereich von x liegt? Wählen Sie die Kategorie auf der linken Seite aus: Nehmen Sie auf der linken Seite keine Änderungen vor.
Problem: Ich habe die Einheit der Schüsselhöhe auf rpx eingestellt und die Einheit von scrollTop ist px. Das bedeutet, dass das x, das ich oben berechnet habe, ist eine Variable. Wenn ich also das Testmodell ändere, ist diese Funktion deaktiviert. . . Habt ihr gute Methoden?

onLoad(e) {
 let goodsList = this.data.goodsList;
 // 初始化每项菜品距离顶部的距离
 for (let i = 0; i < goodsList.length; i++) {
 if (i != 0)
 goodsList[i].scrollTop = parseInt(goodsList[i - 1].scrollTop) + parseInt((goodsList[i - 1].goods.length * 90) + 35)
 }
 this.data.goodsList = goodsList;
},
// 右侧滚动事件
onGoodsScroll: function (e) {
 let that = this;
 // 当前滚动部分距离页面顶部距离
 let scrollTop = parseInt(e.detail.scrollTop);
 let goodsList = that.data.goodsList;
 for (let i = 0; i < goodsList.length; i++) {
 let currentScrollTop = goodsList[i].scrollTop;
 let nextScrollTop = 0;
 if ((i + 1) == goodsList.length)
 nextScrollTop = goodsList[i].scrollTop;
 else
 nextScrollTop = goodsList[i + 1].scrollTop;
 if (currentScrollTop < scrollTop && scrollTop < nextScrollTop) {
 that.setData({
 classifyIdLeft: goodsList[i].id,
 classifySeleted: goodsList[i].id
 })
 }
 }
}

Bezüglich des oben erwähnten Problems 2 lautet die Lösung wie folgt, aber ich verstehe nicht, was mit den spezifischen Parametern los ist, und die Positionierung ist nicht sehr genau. Ich würde Sie gerne um welche bitten gute Lösungen.

// 右侧滚动事件
 onGoodsScroll: function (e) {
 let that = this;
 let scale = e.detail.scrollWidth / 600;
 let scrollTop = e.detail.scrollTop / scale;
 let h = 0;
 let classifySeleted;
 let len = that.data.goodsList.length;
 that.data.goodsList.forEach(function (classify, i) {
 var _h = 70 + classify.goods.length * 180;
 if (scrollTop >= h - 100 / scale) {
 classifySeleted = classify.id;
 }
 h += _h;
 });
 that.setData({
 classifySeleted: classifySeleted,
 classifyIdLeft: classifySeleted,
 })
 },

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie benutzerdefinierte AngularJS-Anweisungen in Projekten

So verwenden Sie NodeJS-Module

Das obige ist der detaillierte Inhalt vonDas WeChat-Miniprogramm erstellt eine Bestellfunktion für Menüs zum Mitnehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!