better-scroll滚动插件【主要功能】使用手册

最新推荐文章于 2025-10-11 18:39:16 发布

原创

最新推荐文章于 2025-10-11 18:39:16 发布 · 953 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了如何在VITE+Vue3项目中集成BetterScroll插件，实现上拉加载、下拉刷新功能，并处理动态渲染时的内容更新。作者详细讲解了安装、配置和常见问题解决方案。

Better Scroll

它是一款使内容块可以拥有上拉加载、下拉刷新功能的插件
官网（参数描述的很详细可以去观摩），例子也有

废话不多说下面直接介绍

安装

npm install @better-scroll/core --save

必要插件 (安装阶段都先下载了，省的回头在下载)，不下载下面的基础功能无法使用

1.mouse-wheel
支持鼠标滚轮事件

npm install @better-scroll/mouse-wheel --save

2.pulldown
支持上拉加载功能

npm install @better-scroll/pull-down --save

3.pullup
支持下拉刷新功能

npm install @better-scroll/pull-up --save

4.observe-dom
自动根据内容变化，更新内容盒的功能

npm install @better-scroll/observe-dom --save

下载完上列插件后，开始写Code了

笔者使用的是【VITE + VUE3】的项目，这个BetterScroll因为是JS写的，不依赖任何框架，所以任何框架都能使用。下面介绍主要代码及可能出现的问题。
在这里插入图片描述

首先，结构上一定是一个父盒子，包含着一个子元素（必须有且只有一个）

<template>
  <div id="container" ref="container">
    <div class="wrapper">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
	// 我是在onMounted内实例化
	import {
   
    nextTick, onMounted,onBeforeUnmount,ref} from "vue";
	import BetterScroll from "@better-scroll/core";
	// 用到哪个引用哪个
	import ObserveDOM  from '@better-scroll/observe-dom'
  	import Pullup  from '@better-scroll/pull-up'
  	import Pulldown from '@better-scroll/pull-down'
  	
	BetterScroll.use(ObserveDOM)
  	BetterScroll.use(Pullup)
  	BetterScroll.use(Pulldown)
  	BetterScroll.use(MouseWheel)
  	
	const container = ref(null);
	let bs;
	onMounted(()=>{
   
   
		bs = new BetterScroll(container.value,{
   
   
			// 透传点击事件
			click : true, 
			// 上拉加载
			pullUpLoad : true, 
			// 下拉刷新，也可以直接等于true,使用默认配置
			pullDownRefresh : {
   
   
				stop : 60, // 回弹停止的地方
				threshold : 30 // 下拉多少距离触发下拉刷新
			},
			// 鼠标滑轮配置
			mouseWheel: {
   
   
		        speed: 20,
		        invert: false,
		        easeTime: 300
	      	},
	      	// 监听内容变化，自动执行bs.re

最低0.47元/天解锁文章