vuejs学习与总结——Better-Scroll的使用_better-scroll 如何script src-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42711899/article/details/106130090

在Vue.js项目中遇到手机端滚动卡顿时，采用Better-Scroll插件解决了问题。本文介绍了Better-Scroll的基本使用流程，包括安装插件和创建BScroll对象的步骤，帮助开发者理解并应用该插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

最近在使用vuejs开发一个项目时，需要对所展示的内容进行滚动，发现原生的谷一激动当我们将项目适配到手机上会出现卡顿的现象。上网查阅了资料，发现有一个比较好的解决方法，那就是使用——better-scroll

基本使用过程

在我们需要使用时，必须安装此插件
在这里插入图片描述
安装成功后，我们就可以进行使用了。
下面举个例子来具体的认识一下better-scroll的具体用法：

引入文件

<script src="./bscroll.js"></script>

应用完成后后，创建一个BScroll的对象，第一个参数：传入我们所需要管理的url,在此我们需要进行管理的是content，需要注意的是：content必须有一个固定的高度。

const bscroll = new BScroll(document.querySelector('.content'),{
}

进行一些额外的操作

 const bscroll = new BScroll(document.querySelector('.content'),{
      //可以进行一些额外的操作
      //probetype:实时监听
      // :0,1不实时的侦测；
      // 2:实时的侦测
      //3.只要是滚动，都侦测
      probetype:3,
      //当所监听的是按钮时，必须设置为true
      click:true,
      //上拉加载更多
      pullUpLoad:true

    })

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content{
      height:200px;
      background-color: lightpink;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div class="content">
  <ul>
    <button class="btn">按钮</button>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>

  </ul>
</div>
<!--一、引入bccroll-->
<script src="./bscroll.js"></script>

  <script>
    //默认情况下，BScroll是不可以实时的监听经停滚动位置

    // 二、应用完成后后，创建一个BScroll的对象，第一个参数：传入我们所需要管理的url,在此我们需要进行管理的是content，需要注意的是：content必须有一个固定的高度
    const bscroll = new BScroll(document.querySelector('.content'),{
      //可以进行一些额外的操作
      //probetype:实时监听
      // :0,1不实时的侦测；
      // 2:实时的侦测
      //3.只要是滚动，都侦测
      probetype:3,
      //当所监听的是按钮时，必须设置为true
      click:true,
      //上拉加载更多
      pullUpLoad:true

    })

    bscroll.on('scroll',(position)=>{
      // console.log(position);
    })
    //原生监听按钮点击
    document.querySelector('.btn').addEventListener('click',function(){
      // console.log('------');
    })
    //当我们需要上拉加载更多时，到时候会回调此函数
    bscroll.on('pullingUp',()=>{
      console.log('上拉加载更多');
      //但是他默认只能监听一次，显然和我们的需求不符，这时我们需要先去监听网络请求
      //数据其你去完成，并且将新的数据展示出来后
      //进行下一次下拉加载更多
      setTimeout(()=>{
        bscroll.finishUp()
      },2000)

    })
</script>
</body>
</html>