Vue2.0 better-scroll sample code for moving terminals,

Vue2.0 better-scroll sample code for moving terminals,

Preface:

In the previous article, the sliding effect was achieved. Let's try the implementation method of the left-right linkage effect.

Effect: When sliding to the right side, the left side can also be changed accordingly. When clicking on the left side, the right side can also be automatically located to the corresponding position.

As shown in, the left side is the sub-column, and the right side is the sub-column details.

The general idea of sliding the right side to link the left side:

1) You need to know the height of each column in the list on the right and store it in an array.

2) To achieve linkage on the left, you must monitor the "scroll" event and obtain its height.

3) Compare the height of scroll with the height of the right column to obtain its index value.

4) In the left-side category, highlight the column corresponding to the index ~

Remaining question: How can I scroll together on the left? It is also necessary to determine the position of scroll in the current left sidebar, and then make it follow the changes, but the height of mobile phones of different sizes is different. How can this problem be solved ??? I don't know ......

When you click on the left side, the general idea of automatic positioning on the right side is as follows:

1) First, make the click valid because better-scroll blocks all default events.

2) bind a click event to the left-side column, obtain the index, and then scroll the corresponding index category on the right side ~ So easy... !!!

How can this problem be solved ?!!

1. First, implement the function of sliding the right side to trigger the left side:

Practice:

(1) define variables first ~ Add a listHight: [] array to data, and a variable scrollY: 0 to hold the y coordinate of the current scroll.

(2) define a function computing height in methods. A knowledge point is also used here (how to obtain the dom element of the category list ?) Do you still remember this. $ refs used in the previous article?

First, we should give a class name for the element whose height is to be obtained. Its name is "food-list-hook ":

Let foodList = this. $ refs. foodsWrapper. getElementsByClassName ('food-list-hook') obtains the list of all categories. The calculation method is defined as follows:

_calculateHeight () {    // console.log(this)    let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')    let height = 0    this.listHight.push(height)    for (let i = 0; i < foodList.length; i++) {     let item = foodList[i]     height += item.clientHeight     this.listHight.push(height)    }}

(3) then, in computed, compare the height value in the array with the y coordinate value of the current scroll, and return the index value of the current height:

How can I obtain the value of scrollY when performing this step? (We can use better-scroll to detect the "scroll" event. In this case, we need to add the corresponding parameters to it, as shown in the Red Line)

currentIndex () {    for (let i = 0; i < this.listHight.length; i++) {     let height1 = this.listHight[i]     let height2 = this.listHight[i + 1]     if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {      return i     }    }    return 0   } }　　

(4) In the template, bind the index value to the list column on the left that has the same index value, and specify a class name, called current, as shown in the red line:

　

(5) Add the corresponding style to the current class in the style:

2. Click "link on the left" and "link on the right ".

(1) make the left sidebar valid, as shown in the red line:

　　　　

(2) Add corresponding click events to the left sidebar:

(3) Compile the selectMenu () method of the event triggered by clicking in methods, and use the obtained $ index to scroll the right side. A transitional effect is added to MS:

Try it ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.