WeChat mini program creates takeout menu ordering function

This time I will bring you the WeChat applet to create a takeout menu ordering function. What are the precautions? The following is a practical case, let’s take a look.

1. The function is only part of the menu function, for reference only

2. Requirement description: When the dishes on the right are scrolling, the dishes on the left The selected category corresponds to the category of the dishes in the first row on the right.

My implementation method: (height of each dish * number of dishes in this category) dish category height = x, each time you scroll, determine whether the current scrollTop is within the range of x? Select the category on the left side: Do not change the left side;
Problem: The unit when I set the height of the dish is rpx, and the unit of scrollTop is px. This means that the x I calculated above is a variable, so when I change the test model, this function is disabled. . . Do you have any good methods?

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

Regarding question 2 mentioned above, the solution is as follows, but I don’t understand what’s going on with the specific parameters, and the positioning is not very accurate. I ask you for any good 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,
 })
 },

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Angularjs custom instructions in projects

How to use nodeJS module

The above is the detailed content of WeChat mini program creates takeout menu ordering function. For more information, please follow other related articles on the PHP Chinese website!