vue 横向滚动

第一步是安装better-scroll：npm install better-scroll --save-dev
第二步将代码复制到页面

 

<template>
 <div>
   <!-- 横向滚动 -->
   <div class="rampageScroll" ref="rampage">
     <ul class="rampage-wrapper" ref="rampageChild">
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
       <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
             <li class="rampage-list">
         <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/activity_applet/discountCouponListBlank.png" alt="">
       </li>
     </ul>
   </div>
 </div>

</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "better-scroll",
   methods: {
    // 初始化
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.rampage, {
          startX: 0,
          click: true,
          scrollX: true,
          // 忽略竖直方向的滚动
          scrollY: false,
          eventPassthrough: "vertical"
        });
      } else {
        this.scroll.refresh();
      }
    },

    // 计算宽度
    _calculateWidth() {
      // 获取类名为 rampage-list 的标签
      let rampageList = this.$refs.rampageChild.getElementsByClassName("rampage-list");
      // 设置一个起始宽度
      let initWidth = 0;
      // 遍历标签
      for (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // 将每一个标签宽度相加
        initWidth += item.clientWidth;
      }
      // 设置可滚动的宽度
      this.$refs.rampageChild.style.width = `${initWidth}px`;
    }
  },

  mounted() {
    /**
     * 横向滚动
     */
    // 第一种方法
    // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
    this.$nextTick(() => {
      // 初始化
      this._initScroll();
      // 计算宽度
      this._calculateWidth();
    });
  }

}

</script>
<style scoped>
  
* {
  padding: 0;
  margin: 0;
}
.rampageScroll {
  overflow: hidden;
}
.rampage-wrapper {
  background: #fff;
  display: flex;
  white-space: nowrap;
}
.rampage-list {
  list-style: none;
  display: inline-block;
  padding-left: 10px;
  padding-bottom: 15px;
  text-align: center;
}
.rampage-list img {
  width: 150px;
  height: 150px;
}


</style>