"Vue" uses better-scroll on the mobile side for scrolling effects

Installation dependency: (c) npm install Better-scroll--save introduced: Import bscroll from ' better-scroll ' format: var obj = new Bscroll (object,{[option 1,],.,.}); Note: 1. To ensure that the height of the object element is 2 higher than its parent element, be sure to ensure that the DOM in which object is rendered and then use the above statement, or the fresh () Options parameter

• StartX: 0 start x-axis position
• Starty: 0 start y-axis position
• scrolly: true Scroll direction is Y axis
• Scrollx:true Scroll direction is X axis
• Click: whether to distribute the Click event, it is usually judged that the click issued by true the browser or the Betterscroll distribution of the Click, can be used event._constructed, if the BS distribution is true
• Directionlockthreshold:5
• Momentum: true whether to turn on sliding inertia when fast sliding
• Bounce: true whether to enable rebound animation effects
• SelectedIndex: 0 Valid when Wheel is true, indicating the selected wheel index
• Rotate: 25 Wheel is valid when True, indicating the rotation angle of each layer of the selected wheel
• Wheel: false This property is used for the picker component, and normal list scrolling does not need to be configured
• Snap: false This property is used for the slider component, and normal list scrolling does not need to be configured
• Snaploop: false is it possible to cycle the carousel seamlessly
• Snapthreshold: The threshold of the 0.1 page can be toggled when you swipe with your finger, and the next page that can slide if the threshold value is greater than
• Snapspeed: 400 , the animation time of the carousel switch
• SwipeTime: 2500 Swipe duration
• Bouncetime: 700 The number of milliseconds the stretch animation lasts
• Adjusttime: 400 wheel is useful for true, adjust the dwell position time
• Swipebouncetime: 1200 Swipe rebound time
• Deceleration: 0.001 The larger the rolling momentum deceleration, the faster the proposal is not more than 0.01
• Momentumlimittime: 300 maximum time to conform to inertia drag
• Momentumlimitdistance: 15 minimum drag distance in accordance with inertia drag
• Resizepolling: Recalculate 60 The better-scroll time interval when resizing the window
• Preventdefault: true whether to block default events
• Preventdefaultexception: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } block Default events
• Hwcompositing: true Whether hardware acceleration is enabled
• Usetransition: true whether to use CSS3 's transition property
• Usetransform: true whether to use CSS3 's Transform property
• Probetype: 1 when rolling, the scroll event will be distributed and will be shut down. 2when scrolling, the scroll event is distributed in real time and does not intercept. 3In addition to the real-time distribution of scroll events, swipe can still be distributed in real-time scroll events

Events Event

• Beforescrollstart-Triggers before scrolling starts
• Scrollstart-Triggers when scrolling starts
• Scroll-triggered when scrolling
• Scrollcancel-Triggers when scrolling is canceled
• Scrollend-triggered at the end of scrolling
• Touchend-triggers when the finger moves off the screen
• Flick-callback function when Fastclick is triggered
• Refresh-triggers when Better-scroll refreshes
• Destroy-triggers when the Better-scroll instance is destroyed

Example:

let scroll =  new bscroll (document. getelementbyid (" Wrapper ) Span class= "Meta delimiter object comma js" >,{ probetype: 3 })   scroll on ( "Scroll ' ,  (pos)   =>  { /span>    Console. (. X +  ' ~ '  + pos.y) })

List of functions

• ScrollTo (x, Y, time, easing)

Scroll to a location, x, y for coordinates, time for animation, easing for easing function
Scroll.scrollto (0, 500)

• Scrolltoelement (EL, Time, OffsetX, OffsetY, easing)

Scrolls to an element, El (required) represents the DOM element, time represents the animation duration, OffsetX and OffsetY represent the coordinate offset, easing represents the easing function

• Refresh ()

Force Scroll to recalculate and call this method when the elements in the better-scroll change

• Getcurrentpage ()

When SNAP is true, gets the current page of scrolling, the structure of the returned object is {x, y, PageX, Pagey}, where x, Y represents the scrolling landscape and portrait position; Pagex,pagey represents the horizontal and vertical page index. Usage such as: Getcurrentpage (). PageX

• GoToPage (x, Y, time, easing)

Snap is true, scrolling to the corresponding page, x for landscape page index, Y for Portrait page index, time for animation, easing for easing function (can be omitted without writing)

• Enable () Better-scroll, enabled by default

• Disable () Disable Better-scroll

• Destroy () destroying Better-scroll, unbinding events

Reference Links:

• 78257916
• https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html#npm

"Vue" uses better-scroll on the mobile side for scrolling effects