Vue better-scroll plug-in details, vuebetter-scroll

Vue better-scroll plug-in details, vuebetter-scroll

What is better-scroll?

Better-scroll is a mobile rolling solution, which is based on iscroll rewriting. The main difference between better-scroll and iscroll is here. Better-scroll is also very powerful. It not only supports common scrolling lists, but also supports carousel charts and picker.

Add

import BScorll from 'better-scroll';

Reference sample code:

Let scroll = new BScroll (Dom object, {// options startX: 0, startY: 0 })

How to obtain the Dom object using Vue,

<Div v-el: food-wrapper> </div> // define the object this. $ els. foodWrapper // obtain the object

(Vue updates data asynchronously. Therefore, before the data is fully loaded, Bscroll cannot obtain the height of the target content, leading to rolling failure)

To solve the problem above, use nextTick () of Vue ();

(To put it simply, because DOM will at least execute all the code in the current tick and then update it. Therefore, it is impossible to execute the code after the data is modified and the DOM is updated. To ensure that the code is executed after the DOM update, the Code must be placed in the next event loop, for example, setTimeout (fn, 0). After DOM is updated, this code will be executed immediately .)

// The DOM has not updated Vue. nextTick (function () {// DOM updated })

Problem:

On the PC page, the click event is not blocked by better-scroll, initialized, and distributed to better-scroll, so that the mobile terminal has a click event. Therefore, when switching to the PC end, the click event is executed twice,

Method: When you click, pass the $ event variable. The event in the Better-scroll plug-in is different from that in the native js event. When the event is distributed by the Better-scroll plug-in, event_constructed is true, native click events do not have this attribute,

SelectMenu (index, event) {if (! Event. _ constructed) {// if this attribute does not exist, do not execute the following function return ;}}

User Manual: https://github.com/ustbhuangyi/better-scroll

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