vue中如何使用better-scroll实现横向滚动？

一、滚动的实现原理

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

二、better-scroll的 html 结构

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

<divclass="wrapper"><ulclass="content"><li>...</li><li>...</li>
    ...</ul></div>

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

三、在Vue中使用better-scroll

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

<template>/* 横向滚动 *//* 这里是父盒子*/<divclass="wrapper_box"
        style="min-height:100vh;
        "
        ref="wrapper"
        v-else>/* 这里是子盒子，即滚动区域*/<divclass="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 BScrollfrom"better-scroll";exportdefault{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=newBScroll(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实现横向滚动