Vue uses better-scroll to explain the parameters and methods, vuebetter-scroll

Vue uses better-scroll to explain the parameters and methods, vuebetter-scroll

Format: var obj = new BScroll (object, {[option1,],...});

Note:

1. Ensure that the height of the object element is higher than that of its parent element.
2. When using the object, make sure that the object's dom is rendered, and then use the preceding statement, or obj. refresh ()

Options Parameters

1. StartX: X axis starting from 0
2. StartY: Y axis starting from 0
3. ScrollY: true. The scroll direction is Y axis.
4. ScrollX: true: the scroll direction is X axis.
5. Click: true indicates whether to dispatch a click event. Generally, you can use event. _ constructed to determine whether the browser sends a click event or a click distributed by betterscroll. If bs distributes a click event, it is true.
6. DirectionLockThreshold: 5
7. Momentum: true: whether to enable sliding inertia when moving fast
8. Bounce: true whether to enable the rebound animation effect
9. Valid when selectedIndex: 0 is true, indicating the selected wheel index.
10. Valid when rotate: 25 indicates the Rotation Angle of each layer of the selected wheel.
11. Wheel: false this attribute is used by the picker component. Normal list scrolling does not require configuration.
12. Snap: false this attribute is used by the slider component, and does not need to be configured for normal list scrolling.
13. SnapLoop: false: whether seamless loop carousel is supported
14. SnapThreshold: 0.1 threshold value that can be switched over when sliding with your fingers. Next page
15. SnapSpeed: 400: Specifies the animation time when the slideshow is switched.
16. SwipeTime: 2500 swipe duration
17. BounceTime: 700 the number of milliseconds that an elastic animation lasts.
18. AdjustTime: 400 if the value of wheel is true, it is useful to adjust the stay position time.
19. SwipeBounceTime: 1200 swipe rebound time
20. Deceleration: 0.001 the faster the rolling momentum slows down, it is recommended that it not be greater than 0.01
21. MomentumLimitTime: 300 the maximum time for inertial drag
22. MomentumLimitDistance: 15 minimum drag distance for inertial drag
23. ResizePolling: 60 adjust the window size and recalculate the time interval between better-scroll.
24. PreventDefault: true: whether to block default events
25. PreventDefaultException: {tagName:/^ (INPUT | TEXTAREA | BUTTON | SELECT) $/} block default events
26. HWCompositing: true whether hardware acceleration is enabled
27. UseTransition: true whether to use the Transition attribute of CSS3
28. UseTransform: true whether to use the Transform attribute of CSS3
29. When probeType: 1 is rolled, scroll events are distributed, and scroll events are intercepted. 2. scroll events are distributed in real time during rolling and will not be intercepted. 3 In addition to distributing scroll events in real time, scroll events can still be distributed in real time in the case of swipe

Events event

Code example:

let scroll = new BScroll(document.getElementById('wrapper'),{  probeType: 3}) scroll.on('scroll', (pos) => { console.log(pos.x + '~' + pos.y)})

1. BeforeScrollStart-triggered before rolling starts
2. ScrollStart-triggered when rolling starts
3. Scroll-triggered when rolling
4. ScrollCancel-triggered when the scroll is canceled
5. ScrollEnd-triggered when rolling ends
6. Touchend-triggered when the finger removes the screen
7. Flick-callback function when fastclick is triggered
8. Refresh-triggered when better-scroll is refreshed
9. Triggered when destroy-destroys a better-scroll instance

Function list

ScrollTo (x, y, time, easing): scroll to a certain position. x and y represent coordinates, time indicates animation time, and easing indicates scroll. scrollTo (0,500)

ScrollToElement (el, time, offsetX, offsetY, easing): scroll to an element. el (required) indicates the dom element, time indicates the animation time, And offsetX and offsetY indicate the coordinate offset, easing indicates the easing function.

Refresh (): Force scroll to recalculate. This method is called when the elements in better-scroll change.

GetCurrentPage (): When snap is set to true, the current page is scrolled. The returned object structure is {x, y, pageX, pageY}, where x, y indicates the horizontal and vertical scrolling positions. pageX and pageY indicate the horizontal and vertical page indexes. Usage example: getCurrentPage (). pageX

GoToPage (x, y, time, easing)
If snap is set to true, the system scrolls to the corresponding page. x indicates the horizontal page index, y indicates the Vertical page index, time indicates the animation, and easing indicates the easing function (which can be omitted without writing)

Enable () enables better-scroll, Which is enabled by default.

Disable () disable better-scroll

Destroy () destroy better-scroll and unbind events

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