怎么在vue中使用better-scroll实现横向滚动

本篇文章为大家展示了怎么在Vue中使用better-scroll实现横向滚动，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

一、滚动的实现原理

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

二、better-scroll的 html 结构

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

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

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

三、在Vue中使用better-scroll

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

<template>      <div        class="wrapper_box"        style="min-height:100vh;        "        ref="wrapper"        v-else      >              <div class="content" ref="wrapperChild">          <div            v-for="(item, index) in currentImgList"            :key="index"            class="imgitem"          >            <img :src="item.img" class="img"  />          </div>        </div>      </div></template><script> import BScroll from "better-scroll"; export default {  data() {    return {      currentImgList: [        { img: require("../../assets/image/zzb_1.png") },        { img: require("../../assets/image/zzb_2.png") },        { img: require("../../assets/image/zzb_3.png") }      ],    };  },  mounted() {    this.slide_x(); //横向滚动  },  methods: {     // 初始化    _initScroll() {      if (!this.scroll) {        this.scroll = new BScroll(this.$refs.wrapper, { // 实例化BScroll接受两个参数，第一个为父盒子的dom节点          startX: 0, /// 配置的详细信息请参考better-scroll的官方文档，这里不再赘述          click: true,          scrollX: true,          scrollY: false, // 忽略竖直方向的滚动          eventPassthrough: "vertical",          useTransition: false // 防止快速滑动触发的异常回弹        });      } else {        this.scroll.refresh(); //如果dom结构发生改变调用该方法重新计算来确保滚动效果的正常      }    },    // 计算宽度    _calculateWidth() {      // 获取类名为 imgItem 的标签      let rampageList = this.$refs.wrapperChild.getElementsByClassName(        "imgItem"      );      // 设置一个起始宽度      let initWidth = 0;      // 遍历标签      for (let i = 0; i < rampageList.length; i++) {        const item = rampageList[i];        // 将每一个标签宽度相加        initWidth += item.clientWidth;      }      // 设置可滚动的宽度      this.$refs.wrapperChild.style.width = `${initWidth}px`;    },    slide_x() {      this.$nextTick(() => { //this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染完毕        this._initScroll(); // 初始化        this._calculateWidth(); // 计算宽度      });    },    },   };</script>

下面是插件原作者说的：

四. 容易出现问题的点：

1. 必须等到页面DOM渲染完成再去执行BScroll的实例化，建议在mounted 钩子函数里执行

2. 子盒子的宽度大于父盒子的宽度
   

上述内容就是怎么在vue中使用better-scroll实现横向滚动，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。