better-scroll移动端滚动插件的使用

最新推荐文章于 2025-06-02 03:56:06 发布

原创最新推荐文章于 2025-06-02 03:56:06 发布 · 721 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了better-scroll插件在移动端商城项目中的应用，详细阐述了原生滚动的原理及局限，并展示了在Vue项目和独立HTML文件中使用better-scroll的步骤，包括安装、初始化及样式设置，帮助开发者解决滚动效果问题。

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

今天分享一下better-scroll插件的使用
最近在做coderwhy老师的移动端商城项目，用到了better-scroll插件，下面介绍一下它的用法。

一、下载

可以去GitHub或者gitee上面搜索better-scroll进行下载

在vue项目中，可直接使用
npm install better-scroll 进行安装
js文件下载地址：https://unpkg.com/better-scroll@2.4.1/dist/better-scroll.js

二、滚动

2.1原生滚动

接下来介绍一下原生滚动。
原生滚动在网页端的支持度较好，在移动端，由于各种浏览器的不同，会出现一些bug,且滚动动速度慢。
原生滚动的原理为，在一个div盒子中放置多个元素，为盒子设置样式
例子：
在ul中放置50个li
结构代码：

<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>
      </ul>

为ul设置样式，可以设置高度，也可以使用默认高度即父盒子的高度，开启y轴滚动
样式代码：

/* 原生滚动 */
  .content {
    height: 200px;
    background-color: pink;
    /* 溢出隐藏 */
    overflow: hidden;
    /* y轴上进行滚动 */
    overflow-y: scroll ;
  }

2.2使用better-scroll

better-scroll的原理是一个大盒子（wrapper）里面包含一个盒子（content），在content中可以放内容，但是content必须要包含在一个大盒子中，盒子高度小于内容高度时效果明显。
在这里插入图片描述

2.2.1在vue中使用

在项目终端，安装better-scroll

npm install better-scroll

在组件中使用,结构如下所示：

<template>
  <div class="wrapper" ref="aaa">
    <div class="content">
      <ul>
        <li>dadou1</li>
        <li>dadou2</li>
        <li>dadou3</li>
        <li>dadou4</li>
        <li>dadou5</li>
        <li>dadou6</li>
        <li>dadou7</li>
        <li>dadou8</li>
        <li>dadou9</li>
        <li>dadou10</li>
      </ul>
    </div>
  </div>
</template>

在这里为wrapper设置ref是为了防止通过类名获取时，其他组件中有同名的类而导致获取元素错误，所以采用ref进行元素标记，通过this.$refs.ref名称进行获取，

<script>
//引入
import BScroll from 'better-scroll'
export default {
    name:'Cart',
    data(){
      return {
        scroll:null
      }
    },
    mounted(){
      this.scroll = new BScroll(this.$refs.aaa,{

      })
    }
}
</script>

为外层wapper盒子设置样式：

.wrapper {
    height: 80px;
    background-color: pink;
    overflow: hidden;
  }

代码总结如下：

<template>
  <div class="wai" ref="aaa">
    <div class="li">
      <ul>
        <li>dadou1</li>
        <li>dadou2</li>
        <li>dadou3</li>
        <li>dadou4</li>
        <li>dadou5</li>
        <li>dadou6</li>
        <li>dadou7</li>
        <li>dadou8</li>
        <li>dadou9</li>
        <li>dadou10</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name:'Cart',
    data(){
      return {
        scroll:null
      }
    },
    mounted(){
      this.scroll = new BScroll(this.$refs.aaa,{

      })
    }
}
</script>

<style scoped>
  .wai {
    height: 60px;
    background-color: pink;
    overflow: hidden;
  }
</style>

2.2.2 在.html文件中

与vue中的不同之处在于需要引入better-scroll的js文件，如下所示

//未压缩版
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
//压缩版
<!-- minify -->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

引入js文件后，盒子的结构不变

<div id="wrapper" >
    <div class="content">
      <ul>
        <li>dadou1</li>
        <li>dadou2</li>
        <li>dadou3</li>
        <li>dadou4</li>
        <li>dadou5</li>
        <li>dadou6</li>
        <li>dadou7</li>
        <li>dadou8</li>
        <li>dadou9</li>
        <li>dadou10</li>
      </ul>
    </div>
  </div>

script中的代码写为：

let bs = BetterScroll.createBScroll(document.getElementById("wrapper"), {})

样式代码为：

#wrapper {
    height: 100px;
    background-color: pink;
    overflow: hidden;
  }

代码总结如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            height: 100px;
            background-color: pink;
            overflow: hidden;
        }
    </style>
    <script src="better-scroll.js"></script>
</head>
<body>
    <div id="wrapper" >
        <div class="content">
          <ul>
            <li>dadou1</li>
            <li>dadou2</li>
            <li>dadou3</li>
            <li>dadou4</li>
            <li>dadou5</li>
            <li>dadou6</li>
            <li>dadou7</li>
            <li>dadou8</li>
            <li>dadou9</li>
            <li>dadou10</li>
          </ul>
        </div>
      </div>
      <script>
            let bs = BetterScroll.createBScroll(document.getElementById("wrapper"), {})
      </script>
</body>
</html>

关于better-scroll更多的内容，可以去github上查看。
今天花了一下午时间去改页面的一个bug,最后发现不是结构的问题，是数据请求的问题，当content中包含异步请求模块时，页面会等所有的资源加载完毕后才能进行滚动，解决办法是使用图片懒加载的方式，具体内容下一次见喽！