vue 数据可视化大屏 开发中，需要实现横向滚动的效果，除了可以使用鼠标拖动滚动外，还需要可以通过点击按钮实现左右滚动。

效果截图

动态效果

实现代码

/**
* @Author: 858834013@qq.com
* @Name: scrollbar
* @Date: 2023年07月14日
* @Desc: 横向拖动滚动

*/
<template>
  <div class="listBut">
    <div class="previous cur" @click="scrollToLeft">
      <img src="./assets/icon_left.png" alt="">
    </div>
    <div class="next cur" @click="scrollToRight">
      <img src="./assets/icon_right.png" alt="">
    </div>
  </div>
  <div class="tabsBody horizontal-scrollbar-container">
    <div class="tabs scroll-wrapper" ref="scroll">
      <div class="scroll-content" ref="scroll2">
        <div class="newTabs">
          <div class="tab2 listtg" ref="scrollItem" v-for="(item,index) in 20">
            <img src="./assets/videoImg.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  name: 'tabs',
  components: {},
  data() {
    return {
      index: 0,
      scroll: null,
      lastSpot: 0
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    active: {
      type: Number,
      default() {
        return 0
      }
    },
  },
  mounted() {
    var that = this
    that.$nextTick(() => {
      that.init2()
    })
  },
  watch: {
    list() {
      var that = this
      that.$nextTick(() => {
        that.init2()
      })
    }
  },
  methods: {
    scrollToLeft() {
      var left = this.$refs.scroll.offsetWidth
      if (this.lastSpot > 0) {
        if (left > this.lastSpot) {
          this.scroll.scrollBy(this.lastSpot, 0, 500) // 向左滚动100像素，时长为500ms
        }
        if (left <= this.lastSpot) {
          this.scroll.scrollBy(left, 0, 500) // 向左滚动100像素，时长为500ms
        }
      }
    },
    scrollToRight() {
      var right = this.$refs.scroll.offsetWidth
      var lastSpot = (this.$refs.scroll2.offsetWidth - this.lastSpot)
      if (lastSpot > 0) {
        if (right < lastSpot) {
          this.scroll.scrollBy(-right, 0, 500) // 向左滚动100像素，时长为500ms
        }
        if (right >= lastSpot) {
          this.scroll.scrollBy(-lastSpot, 0, 500) // 向左滚动100像素，时长为500ms
        }
      }
    },
    init2() {
      var that = this
      this.scroll = new BScroll(this.$refs.scroll, {
        scrollX: true,
        scrollY: false,
        click: true,
        probeType: 1,
        scrollbar: {
          fade: true,
          interactive: false,
          scrollbarTrackClickable: false,
          scrollbarTrackOffsetType: 'clickedPoint' // can use 'step'
        }
      })
      this.scroll.on('scrollEnd', (e) => {
        console.log('scrollEnd')
        console.log(e)
        this.lastSpot = Math.abs(e.x)
        console.log(Math.abs(e.x))
      })
      this.scroll.on('scrollStart', (e) => {
        console.log('scrollStart')
        console.log(e)
      })
      this.scroll.on('scroll', (e) => {
        console.log('scroll')
        console.log(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabsBody {
  width: calc(100% - 30px);
  margin-left: 10px;
  overflow: hidden;
  position: relative;
  height: calc(100% - 10px);
  margin-top: -20px;
}

.newTabs {
  display: flex;
  display: -webkit-flex;
  padding: 0;
  position: relative;
  height: 100%;
}

.tab2 {
  width: 200px;
  position: relative;
  height: 100%;
  //background: red;
}

.tabs {
  display: flex;
  display: -webkit-flex;
  padding: 0;
  position: relative;
  height: 100%;

  .tab {
    position: relative;
    height: 100%;

    span {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      white-space: nowrap;
    }

    .line {
      background: rgba(54, 107, 229, 0);
      border-radius: 4px;
      position: absolute;
      bottom: 1px;
      width: 100%;
      height: 4px;
    }
  }
}

.scroll-content {
  display: inline-block;
  align-self: center;
  position: relative;
  height: 100%;
}

.listtg {
  width: 220px;
  height: calc(100% - 4px);
  position: relative;
  margin-right: 4px;

  img {
    position: relative;
    width: 100%;
    height: 100%;
  }
}

.cur {
  cursor: pointer;
}

.listBut {
  position: relative;
  top: -30px;
  display: flex;
  right: 50px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .previous {
    margin-right: 20px;
  }
}
</style>