Le mini programme WeChat crée une fonction de commande de menus à emporter

Cette fois, je vais vous apporter l'applet WeChat pour créer une fonction de commande de menus à emporter Quelles sont les précautions Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. La fonction n'est qu'une partie de la fonction de menu, pour référence seulement

2. les plats à gauche La catégorie sélectionnée correspond à la catégorie des plats de la première rangée à droite.

Ma méthode de mise en œuvre : (hauteur de chaque plat * nombre de plats dans cette catégorie) + hauteur de la catégorie de plat = x, à chaque fois que vous faites défiler, déterminez si le scrollTop actuel est dans la plage de x ? Sélectionnez la catégorie sur le côté gauche : N'apportez aucune modification sur le côté gauche ;
Problème : J'ai défini l'unité de hauteur du plat sur rpx, et l'unité de scrollTop est px. Cela signifie que le x que j'ai calculé ci-dessus est. une variable, donc lorsque je change de modèle de test, cette fonction est désactivée. . . Avez-vous de bonnes méthodes ?

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

Concernant la question 2 évoquée ci-dessus, la solution est la suivante, mais je ne comprends pas ce qui se passe avec les paramètres spécifiques, et le positionnement n'est pas très précis je vous demande de bonnes solutions. .

// 右侧滚动事件
 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,
 })
 },

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les instructions personnalisées Angularjs dans les projets

Comment utiliser les modules nodeJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!