在vue中使用better-scroll，完成平滑滚动效果

程序员文章站 2022-06-19 15:43:54

使用better-scroll，完成平滑滚动效果转载自博主——非凡主力better-scroll详解...

在vue中使用Better-Scroll，完成平滑滚动效果

此博客参考于以上的官方文档，并加以vue的小Demo建立。

引言、BetterScroll 是什么

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。

结构示例：

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

最简单的初始化代码如下：

import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

BetterScroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然，如果传递的是一个字符串，BetterScroll 内部会尝试调用 querySelector 去获取这个 DOM 对象。

浏览器的滚动原理

浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

BetterScroll 也是一样的原理，我们可以用一张图更直观的感受一下：
在vue中使用better-scroll，完成平滑滚动效果
绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理

一、Better-Scroll的安装

①在终端中安装better-scroll

npm install better-scroll --save

安装成功：
在vue中使用better-scroll，完成平滑滚动效果
②导入BScroll模块

// 2.导入
import BScroll from 'better-scroll'

二、小Demo实现

需求：在一定大小的容器大小中实现上下滚动的效果，并有弹簧效果。

注意：
BScroll的使用条件：
①
wrapper类中嵌套一个也是唯一一个content类，即只有两个标签形成嵌套，
content类下的标签内部可以有很多其他标签，但是一定要按照wrapper下只有一个标签。
(若有其他标签和标签2 同级的标签,这个同级标签不会有BScroll的效果)

即：

<标签1 class="wrapper">
      <标签2 class="content">
      		其他各种不限数量不限类型的标签
	  </标签2>
	  // 可有和 标签2 同级的标签,但是这个同级标签不会有BScroll的效果
</标签1>

②外层的标签必须要有高度。

代码如下：

<!-- 通过better scroll 完成平滑的滚动效果
      1. npm install better-scroll --save
 -->
<template>
  <div class="wrapper" ref="aaaa">
      <ul class="content">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
        <li>列表7</li>
        <li>列表8</li>
        <li>列表9</li>
        <li>列表10</li>
        <li>列表11</li>
        <li>列表12</li>
        <li>列表13</li>
        <li>列表14</li>
        <li>列表15</li>
        <li>列表16</li>
        <li>列表17</li>
        <li>列表18</li>
        <li>列表19</li>
        <li>列表20</li>
        <li>列表21</li>
        <li>列表22</li>
        <li>列表23</li>
        <li>列表24</li>
        <li>列表25</li>
        <li>列表26</li>
        <li>列表27</li>
        <li>列表28</li>
        <li>列表29</li>
        <li>列表30</li>
      </ul>
  </div>
</template>

<script>
// 2.导入
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      scroll:null,
    };
  },
  mounted () {
    //1.法1（根据官方文档）
    //this.scroll=new BScroll('.wrapper',{
    //scrollY: true,
    //click: true
    //})
    //按照官方文档的做法，按理来说是可以实现的，
    //但是可能由于正在做的这个项目内有其他名为wrapper的标签，
    
	//通过this.$refs.refname来进行唯一查找
	//2.法2 
     this.scroll=new BScroll(this.$refs.aaaa,{
       scrollY: true,
       click: true
     })
  }

}

</script>

<style>
.wrapper{
  height: 150px;
  background-color: red;
}
</style>

执行效果如下：
这个是动画效果，但是不会截，大家可以cv代码自己看看效果。
在vue中使用better-scroll，完成平滑滚动效果

接下来有关AIP的总结是在博主——非凡主力的博客
better-scroll详解之下添加了少量的解析。

API

api 里面所有的方法和属性都是实例化对象的。

on （方法）

on(type,fn,context)

参数：

type：事件名
fn：回调函数
context：函数执行的上下文环境，默认是this
返回值：无
作用：监听当前实例上的自定义事件。如：scroll，scrollEnd，pullingUp,pullingDown等

示例：

import BScroll from "better-scroll"
let scroll = new BScroll (".wrapper")
function onScroll(pos){
	console.log("scroll")
}
scroll.on("scroll",onscroll)

scroll （事件）

bs.on(“scroll”,function(){})

参数：{Object} {x, y} 滚动的实时坐标
触发时机：滚动过程中，具体时机取决于选项中的 probeType。

probeType （属性）
作用：通过设置不同的probeType属性，来设置滚动时，不同派发scroll事件的方式。

类型：Number
默认值：0
可选值：1、2、3

当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
如果没有设置该值，其默认值为 0，即不派发 scroll 事件。

举例如下：

import BScroll from "better-scroll"
const bcroll = new BScroll (".wrapper",{
	probeType:3
})

bcroll.on("scroll",(position)=>{
		console.log(position)
	}
)

click（属性）

类型：Boolean
默认值：false
作用：better-scroll默认会阻止浏览器的原生click事件。当设置为true时，better-scroll会派发一个click事件，我们会给派发的event参数加一个私有属性
_constructed，值为true。

举例如下：

import BScroll from "better-scroll"
const bcroll = new BScroll (".wrapper",{
	probeType:3,
	click:true
})

bcroll.on("scroll",(position)=>{
		console.log(position)
	}
)

scrollEnd （事件）

参数：{Object} {x, y} 滚动结束的位置坐标
触发时机：滚动结束。

maxScrollY （属性）

类型：Number
作用：scroll 最大纵向滚动位置。
备注：scroll 纵向滚动的位置区间是 0 - maxScrollY，并且 maxScrollY 是负值。

scrollX （属性）

类型：Boolean
默认值: false
作用：当设置为 true 的时候，可以开启横向滚动。

备注：当设置 eventPassthrough 为 ‘horizontal’ 的时候，该配置无效。

refresh （方法）

作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。例：scroll.refresh();

除此以外其他更多的方法、属性及其用法，
在vue中使用better-scroll，完成平滑滚动效果
可以访问BScroll官方文档进行进一步学习。

本文地址：https://blog.csdn.net/weixin_45664402/article/details/111088864

上一篇： Vue快速应用配置Three.js

下一篇： nested exception is java.lang.IllegalStateException: Cannot load environment] with root cause

在vue中使用better-scroll，完成平滑滚动效果