Vue uses better-scroll to achieve horizontal scrolling method example

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

npm install better-scroll --save //npm install import BScroll from 'better-scroll' //Introduce better-scroll in the component file

<template>
   /* Horizontal scroll */
   /* This is the parent box */
<div
        class="wrapper_box"
        style="min-height:100vh;
        "
        ref="wrapper"
        v-else
      >
      /* This is the subbox, the scrolling area*/
        <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(); //Horizontal scroll},
  methods: {
     // Initialization_initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, { // Instantiate BScroll and accept two parameters, the first one is the DOM node of the parent box startX: 0, /// For detailed configuration information, please refer to the official documentation of better-scroll, which will not be repeated here click: true,
          scrollX: true,
          scrollY: false, // Ignore vertical scrolling eventPassthrough: "vertical",
          useTransition: false // Prevent abnormal rebound triggered by fast sliding});
      } else {
        this.scroll.refresh(); //If the DOM structure changes, call this method to recalculate to ensure the normal scrolling effect}
    },
    // Calculate width_calculateWidth() {
      // Get the tag with class name imgItem let rampageList = this.$refs.wrapperChild.getElementsByClassName(
        "imgItem"
      );
      // Set a starting width let initWidth = 0;
      // Traverse the labels for (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // Add each label width initWidth += item.clientWidth;
      }
      // Set the scrollable width this.$refs.wrapperChild.style.width = `${initWidth}px`;
    },
    slide_x() {
      this.$nextTick(() => { //this.$nextTick is an asynchronous function, to ensure that the DOM has been rendered this._initScroll(); // Initialization this._calculateWidth(); // Calculate width });
    },
    },
   

};
</script>