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

 更新时间:2021年06月02日 11:55:48   作者:铁锤妹妹@  
这几天研究项目时,看到了 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" 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实现横向滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue如何引用其他组件(css和js)

    vue如何引用其他组件(css和js)

    本篇文章主要介绍了vue如何引用其他组件(css和js) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Vue实现当前页面刷新的4种方法举例

    Vue实现当前页面刷新的4种方法举例

    我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能,下面这篇文章主要给大家介绍了关于Vue实现当前页面刷新的4种方法,需要的朋友可以参考下
    2023-04-04
  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table的列隐藏问题解决

    这篇文章主要介绍了element-ui 中的table的列隐藏问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue实现列表垂直无缝滚动

    vue实现列表垂直无缝滚动

    这篇文章主要为大家详细介绍了vue实现列表垂直无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue+iview实现文件上传

    vue+iview实现文件上传

    这篇文章主要为大家详细介绍了vue+iview实现文件上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue-cli的index.html中使用环境变量方式

    vue-cli的index.html中使用环境变量方式

    这篇文章主要介绍了vue-cli的index.html中使用环境变量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3中watch无法监听的解决办法

    Vue3中watch无法监听的解决办法

    本文主要介绍了Vue3中watch无法监听的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue中对拿到的数据进行A-Z排序的实例

    Vue中对拿到的数据进行A-Z排序的实例

    今天小编就为大家分享一篇Vue中对拿到的数据进行A-Z排序的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 如何把vuejs打包出来的文件整合到springboot里

    如何把vuejs打包出来的文件整合到springboot里

    这篇文章主要介绍了如何把vuejs打包出来的文件整合到springboot里,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue+element开发一个谷歌插件的全过程

    vue+element开发一个谷歌插件的全过程

    这篇文章主要给大家介绍了关于vue+element开发一个谷歌插件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论