How to use better-scroll plug-in in vue

This article mainly introduces the detailed explanation of the use of vue better-scroll plug-in. Now I will share it with you and give you a reference.

What is better-scroll

better-scroll is a mobile scrolling solution. It is based on the rewrite of iscroll. The main difference between it and iscroll is here. better-scroll is also very powerful. It can not only make ordinary scrolling lists, but also carousel charts, pickers, etc.

Add the sample code referenced by

import BScorll from 'better-scroll';

in the required file:

let scroll = new BScroll(Dom对象, {//options
 startX: 0,
 startY: 0
})

Vue gets the Dom object method,

<p v-el:food-wrapper></p>//定义对象
this.$els.foodWrapper//获取对象

(When Vue updates data, Asynchronous, so before the data is completely loaded, Bscroll cannot obtain the height of the target content, so it will cause the phenomenon of being unable to scroll)

In order to solve the above problem, use Vue's nextTick();

(Simply put, because the DOM will at least be updated after all the codes in the current tick are executed. Therefore, it is impossible to execute after the data is modified and the DOM is updated. You must ensure that a certain piece of code is executed after the DOM is updated. You must put this code into the next event loop, such as setTimeout(fn, 0), so that this code will be executed immediately after the DOM is updated.)

// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

Question:

When on the PC page, clicks will not be blocked by better-scroll. During initialization, events are dispatched to better-scroll so that the mobile side has click events. Therefore, when switching to the PC side, the click event will be executed twice. Times,

method: when clicked, pass the $event variable. The event event in the Better-scroll plug-in has different attributes from the event in the native js. When the event is dispatched by the Better-scroll plug-in, event_constructed is true. Native click events do not have this attribute.

selectMenu(index,event){
  if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
    return;
  }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to solve the niceScroll scroll bar misalignment problem in jQuery

How to implement the Baidu search interface in JS

How to implement the double-color ball function in JS

The above is the detailed content of How to use better-scroll plug-in in vue. For more information, please follow other related articles on the PHP Chinese website!