preface

This project is a previous APP project of the company, a restaurant’s own food ordering app, which has been offline.

The old am idle to practice, the first is HTML + JQ version, ready to be placed in the public from the number, then first with VUE to achieve it, recently studied the small program, of course, is also a good practice demo

Vue has a project video tutorial called actual combat Hungry me, it has talked about menu linkage, in the small program, the idea is the same, but the details are different

First, the effect picture:

There are two function points:

  • When you click on the left category TAB, scroll to the anchor on the right. (In HTML, you can use anchors, and that’s what you did.)
  • Scroll to the right, with the top as the dot, scroll to which category, and activate (highlight) the corresponding TAB on the left

The basic idea

Click left and right to scroll to the appropriate position

Since there is no anchor point in wechat, the product list on the right uses the scrollview native component and can only be set to its scrolltop (same meaning as HTML).

So you might have thought way, the left has several category labels, on the right side there are a few products, case has three categories, each category has a title and a number of goods container, we classify the goods interval height (header height * + goods container quantity), into an array, the array starting from 0, of course, Because the initial scroll position is 0 and when you click on the left TAB, you get the index value, and based on the index value, you take the array of heights, and you get the scroll top of the list of items

When scrolling on the right, the corresponding TAB is activated on the left

When scrolling, the real-time scscroll top is obtained, and the interval height array is brought into the array to calculate the position, and the corresponding index value is returned to determine which menu label on the left needs to be highlighted

Based on the sketch above, suppose we have three categories with two products per category, the resulting height array is [0,200,400,600].

Suppose we scroll to 298 pixels, and according to the comparison height array, more than 200, less than 400, should return the index of the array: 1

1 is the second location, which is the second TAB that should be highlighted on our left menu

The relevant code

According to the results of the above sketch, in this example, the classification and the commodity container are at the same level, and the commodity container of each category is an independent container, which is no longer uniformly wrapped in a container

We load the goods data in the onLoad event and assign the goods data to the goods in the data

Note here: the method to calculate the height of the goods interval needs to be called in the setData callback, because after setData, the rendering video is asynchronous, so it must be called in the setData callback

Below is the method to get the height of each category. The code to get the view container is moved directly without explanation

Below is the view code for the left menu to highlight which TAB is bound to a click event based on the calculated index value

When you click the left menu label, according to the index value of the label clicked before, bring it to the range height array, assign it to the listViewScrollTop value in data, and bind the scrolltop parameter in the scroll container to this value, the scroll will reach the corresponding height

Bind a rolling event to the commodity rolling container. When rolling, the current rolling height can be obtained. Compare the current height in the calculated interval height array, which interval belongs to, return the corresponding index value, and assign the value to cateListActiveIndex in data

Used on the left to calculate which label should be highlighted

Summary: The idea has been explained above, paste code is the norm

Attached project address, there is a need to pull their own: gitee.com/vbyzc/mz-wx…

Mock data is a local mock, which is the mock directory under the project directory, see here: Create a local Mock data server for applets development