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

2023-12-27 18:03:58

今天分享一下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;
  }