您的位置：首页 > 编程学习 > > 正文

vue 怎么设置滚动条的长度（vue使用better-scroll实现横向滚动的方法实例）

更多时间：2022-01-22 01:54:26 类别：编程学习浏览量：1918

vue 怎么设置滚动条的长度

vue使用better-scroll实现横向滚动的方法实例

一、滚动的实现原理

better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动；同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动。

二、better-scroll的 html 结构

先来看一下 better-scroll 常见的 html 结构：

<li class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</li>

BetterScroll应用于外部wrapper容器，并且滚动部分是content。请注意，wrapper默认情况下，BetterScroll处理容器（）的第一个子元素（内容）的滚动，这意味着其他元素将被忽略。

三、在Vue中使用better-scroll

npm install better-scroll --save  //npm 安装
import BScroll from 'better-scroll'  //组件文件中引入better-scroll

<template>
   /* 横向滚动 */
   /* 这里是父盒子*/
<li
        class="wrapper_box"
        style="min-height:100vh;
        "
        ref="wrapper"
        v-else
      >
      /* 这里是子盒子，即滚动区域*/
        <li class="content" ref="wrapperChild">
          <li
            v-for="(item, index) in currentImgList"
            :key="index"
            class="imgItem"
          >
            <img :src="item.img" class="img" style="margin: 0 10px;" />
          </li>
        </li>
      </li>
</template>
<script>
 import BScroll from "better-scroll";
 export default {
  data() {
    return {
      currentImgList: [
        { img: require("../../assets/image/zzb_1.jpg" alt="vue 怎么设置滚动条的长度（vue使用better-scroll实现横向滚动的方法实例）" border="0" />

下面是插件原作者说的：

vue 怎么设置滚动条的长度（vue使用better-scroll实现横向滚动的方法实例）