欢迎光临
我的个人博客网站

better-scroll快速上手及封装(vue项目)


愿你有诗有梦,有坦荡荡的远方

本文声明:这是一篇学习coderwhy老师的vue2课程的一个笔记,所以本文章是在vue项目中实现,没学过vue的大佬们可以举一反三。

使用场景及介绍

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。

安装

npm install @better-scroll/core --save

基本使用

<div class="wrapper" ref="wrapper"> <ul class="scroll-content"> ... </ul> </div>

data() { return { scroll: null, }; }, mounted() {//不用created,因为那时候还没将元素放上去 this.scroll = new betterScroll(this.$refs.wrapper,{ // ...... 详见配置项 }); }, ...

better-scroll快速上手及封装(vue项目)

 

 

 

常见配置项

1. click

  • 类型:boolean
  • 默认值:false
  • 作用:BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true,BetterScroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 `_constructed`,值为 true。

2. probeType

  • 类型:number
  • 默认值:0
  • 可选值:1|2|3
  • 作用:决定是否派发 scroll 事件,对页面的性能有影响,尤其是在 `useTransition` 为 true 的模式下。

 

// 派发 scroll 的场景分为两种: // 1. 手指作用在滚动区域(content DOM)上; // 2. 调用 scrollTo 方法或者触发 momentum 滚动动画(其实底层还是调用 scrollTo 方法)  // 对于 v2.1.0 版本,对 probeType 做了一次统一  // 1. probeType 为 0,在任何时候都不派发 scroll 事件, // 2. probeType 为 1,仅仅当手指按在滚动区域上,每隔 momentumLimitTime 毫秒派发一次 scroll 事件, // 3. probeType 为 2,仅仅当手指按在滚动区域上,一直派发 scroll 事件, // 4. probeType 为 3,任何时候都派发 scroll 事件,包括调用 scrollTo 或者触发 momentum 滚动动画

3. pullUpLoad

  • 类型:Boolean | Object
  • 默认值:false
  • 作用:这个配置用于做上拉加载功能,默认为 false。当设置为 true 或者是一个 Object 的时候,可以开启上拉加载,例如:

 

pullUpLoad:true,//相当于pullUpLoad:{ threshold:0 }

可以配置离(`threshold`)来决定开始加载的时机。

封装成一个独立组件

<template> <div ref="wrapper" class="wrapper"> <div> <slot></slot> </div> </div> </template>  <script> import BScroll from "better-scroll"; export default { name: "BetterScroll", data() { return { bs: null, }; }, props: { probeType: { type: Number, default: 0, }, pullUpLoad: { type: Boolean, default: false, }, }, mounted() { setTimeout(() => { this.bs = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: true, pullUpLoad: this.pullUpLoad, }); this.bs.on("scroll", (option) => { this.$emit("scroll", option); }); this.bs.on("pullingUp", () => { this.$emit("pullingUp"); setTimeout(() => { this.bs.finishPullUp(); }, 2000); }); }, 1000); }, methods: { scrollTo(x, y, time = 500) { this.bs&&this.bs.scrollTo(x, y, time); }, refresh(){ this.bs&&this.bs.refresh(); } }, }; </script>  <style scoped> .wrapper { overflow: hidden; } </style>

使用组件

import betterScroll from "better-scroll";

<better-scroll :probeType="3" :pullUpLoad="true" @scroll="contentScroll" @pullingUp="contentPullingUp" >

做世界的水手,奔赴所有的港口

赞(0) 打赏
未经允许不得转载:张拓的天空 » better-scroll快速上手及封装(vue项目)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏