欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue better-scroll插件使用详解

程序员文章站 2022-04-10 11:18:05
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这...

什么是 better-scroll

better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。

在需要的文件中添加

import bscorll from 'better-scroll';

引用的示例代码:

let scroll = new bscroll(dom对象, {//options
 startx: 0,
 starty: 0
})

vue获得dom对象方法,

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

(vue 更新数据时是异步的,所以在数据未加载完全之前,bscroll无法获取目标内容的高度,所以会导致无法滚动的现象)

为了解决上面的问题,运用vue的nexttick();

(简单说,因为dom至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且dom更新后再执行,要保证在dom更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如settimeout(fn, 0),这样dom更新后,就会立即执行这块代码。)

// dom 还没有更新
vue.nexttick(function () {
 // dom 更新了
}) 

问题:

pc页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到pc端时,点击事件会被执行两次,

方法:在点击时,传 $event变量,better-scroll插件中的 event事件和原生 js的 event有属性上得区别,better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

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

使用手册:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。