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

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.refresh()方法
			observeDOM : true
		})
		// 上拉加载事件
		bs.on('pullingUp',pullingUpHandler)
		// 下拉刷新事件
		bs.on('pullingDown',pullingDownHandler)
		// 监听开始滚动事件
		bs.on('beforeScrollStart',()=>{
	      console.log('开始滚动')
	    })
		// 监听滚动事件，有默认参数
		bs.on('scroll',(e)=>{
			console.log('滚动中',e)
		})
		// 监听滚动结束事件
		bs.on('scrollEnd',()=>{
	      console.log('滚动结束')
	    })
	    // 上拉加载
		const pullingUpHandler = () => {
			console.log('上拉加载')
			// 模拟请求,两秒后加载成功
			setTimeout(()=>{
				// 必须结束上拉事件，不然无法触发下一次
				bs && bs.finishPullUp()
				// 虽然有observeDOM自动监听变化，但是我还是建议你手动刷新一次
				bs && bs.refresh()
			},2000)
		}
		// 下拉刷新
		const pullingDownHandler = () => {
			console.log('下拉刷新')
			// 模拟请求
			setTimeout(()=>{
				// 必须结束上拉事件，不然无法触发下一次
				bs && bs.finishPullDown()
				// 手动刷新
				bs && bs.refresh()
			},2000)
		}
	})
	
	// 页面销毁前记得清除事件，养成好习惯
	onBeforeUnmount(()=>{
		bs && bs.destroy();
    	bs = null;
	})
</script>

常见问题

1. 场景描述，绝大部分使用betterScroll实例都是动态渲染的，也就是内容数据是异步的，会导致实例一开始无法滚动，因为你的数据还没渲染，内容高度就已经被确认了。笔者一开始并不知道有【observeDOM】这个插件方法，于是使用了provide/inject注入的方法，使得子组件能够在拿到数据的时候重新渲染实例
   例如：

父组件

import { provide } from "vue";
provide('data',{ bs })

把实例化后的bs传递到了子组件

const provideProps = inject('data');
onMounted(()=>{
   nextTick(()=>{
       provideProps.bs.refresh()
   })
})

// 或者这里你可以在获取到异步数据后重新执行
// provideProps.bs.refresh()这个事件

这样虽说可以实现，但是还是有点丑，能使用官方插件就使用吧

---

结合better-scroll，自己写上拉/下拉显示的组件

简易写写，意思大差不差自己结合看看，我直接贴图和代码了

PullDown.vue

<template>
  <div class="pulldown">
    <div class="pulldown-scroller">
        <div v-show="beforePullDown">
          <span>下拉放手刷新</span>
        </div>
        <div v-show="!beforePullDown">
          <span v-show="isPullingDown">加载中...</span>
          <span v-show="!isPullingDown">刷新成功</span>
        </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { mainStore } from '../store/index'
  import { storeToRefs } from 'pinia'

  const store = mainStore();

  const { beforePullDown,isPullingDown } = storeToRefs(store)
</script>

<style lang="scss" scoped>
  .pulldown{
    text-align: center;
    background: white;
    position: absolute;
    line-height: 60px;
    padding: 0 10px;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    box-sizing: border-box;
  }
</style>

PullUp.vue

<template>
  <div class="pullup-tips">
    <div v-if="!isPullUpLoad" class="before-trigger">
      <span class="pullup-txt">上拉加载更多</span>
    </div>
    <div v-else class="after-trigger">
      <span class="pullup-txt">加载中...</span>
    </div>
  </div>
</template>

<script setup>    
    import { ref } from 'vue'
    import { mainStore } from '../store/index'
    import { storeToRefs } from 'pinia'

    const store = mainStore();

    const { isPullUpLoad } = storeToRefs(store)



</script>

<style lang="scss" scoped>
    .pullup-tips{
        background: white;
        padding: 10px;
        text-align: center;
        font-weight: bold;
    }
    .after-trigger{
        padding: 20px 0px;
    }
</style>

store/index.js

import { defineStore } from 'pinia'


export const mainStore = defineStore('main',{
    state : () => {
        return {
            list : 100,
            isPullUpLoad : false,
            isPullingDown : true,
            beforePullDown : true,
        }
    },
    actions : {
        setList(num){
            this.list += num
        },
        refreshList(){
            this.list = 100
        },
        changePullUploadStatus(){
            this.isPullUpLoad = !this.isPullUpLoad
        },
        changePullDownStatus(){
            this.isPullingDown = !this.isPullingDown
        },
        changeBeforePullDown(){
            this.beforePullDown = !this.beforePullDown;
        },
        changeisPullingDown(){
            this.isPullingDown = !this.isPullingDown;
        }
    }
})

引用

<template>
    <div>
        <pull-down-tips></pull-down-tips>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
        <pull-up-tips></pull-up-tips>
    </div>
</template>

<script setup>
	import PullUpTips from '../components/PullUp.vue'
    import PullDownTips from '../components/PullDown.vue'
	import { mainStore } from '../store/index'
    import { storeToRefs } from 'pinia'
    
	const store = mainStore()
    const { list } = storeToRefs(store)
</script>

效果演示