vue3实现鼠标拖动横向滚动，vue数据大屏开发，客户要求列表可以横向拖动，这里使用的better-scroll插件来实现自己想要的效果。

演示demo:vue3数据可视化大屏-科技管理大屏案例演示

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

*/
<template>
  <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 list">
            <echarts1 v-if="item.type==0" color4="rgba(76, 245, 255, 0.3)"
                      color3="#48ecf9"
                      color1="rgba(76, 245, 255, 0.5)"
                      color2="rgba(76, 245, 255, 1)"
                      percent="50"
                      :title="item.title"></echarts1>
            <echarts1 v-else color4="rgba(255,255,255, 0.3)"
                      color3="#b9cdd5"
                      color1="rgba(255,255,255, 0.3)"
                      color2="rgba(255,255,255, 0.3)"
                      percent="50"
                      :title="item.title"></echarts1>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import echarts1 from './echarts.vue'
export default {
  name: 'tabs',
  components: {
    echarts1,
  },
  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: {
    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')
        this.lastSpot = Math.abs(e.x)
      })
      this.scroll.on('scrollStart', (e) => {
        console.log('scrollStart')
        console.log(e)
      })
      this.scroll.on('scroll', () => {
        console.log('scroll')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tabsBody {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.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%;
    background: red;

    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%;
}
</style>