better-scroll is focused on solving a variety of mobile end demand for plug-rolling scene, and can be a good and used in conjunction with Vue
First, let's summarize the current project to be solved by this plugin needs:
1. List the types of goods can scroll left, right of the current types of goods can scroll details
2. The right scroll up and down when the left side corresponds to the type also highlighted
3. Click the type on the left side when the right side of the slide quickly to the corresponding commodity
First, install better-scroll
Introduced in the project
Examples of bscroll method is as follows:
In this configuration the first transfer function by the acquired DOM object class name, the second pass is a configuration parameter object, so we need to get to the VUE DOM object
In the methods vue instantiated
Product List section to the right of us not only to instantiate the rolling elements, also we need to listen to his scroll callback
A variable in the data storage scrollY conveniently used globally, the same instantiation objects foodscroll data need to be stored in
Examples of foodscroll and populate the data foodScroll
And call when the DOM has been completely rendered in access to data when this method to instantiate two rolling
The first step here also completed, test results can be printed out from the right side of the rolling Y
Then also we need to know the right of each commodity type of height and the total height
This also defines the data array
The height of each array are pushed stored
Then you can use the array and acquired prior to scrolly to get the current index is calculated using the method attributes, whether to return a different index values in the range of scrolling through comparison between two distances product category
Binding of this class
This second step also completed, and now the right time to slide to the left will add the current style in the corresponding block
The final step on the right on the left block Jump:
Very simple, add a click event to the left of each list, passing in the current index
In this method to obtain the list on the right, and then call interface corresponding to this plug-in
