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" style="margin: 0 10px;" />
        </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. 子盒子的宽度大于父盒子的宽度
   

最后

better-scroll插件作者的文章，发现better-scroll真强大啊！

当 better-scroll 遇见 Vue

在Vue中用better-scroll实现横向滚动

关于vue使用better-scroll实现横向滚动的文章就介绍至此，更多相关vue better-scroll实现横向滚动内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

　　我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能，如果你也是那么恭喜你，你可以ctrl+c、ctrl+v再改一改，如果你不是那么你也不要着急的走可以看完我的文章会对你有所帮助！　　 ...