vue3使用jquery导航栏左右滚动

首先推荐大家关注一下https://primarycolor.blog.csdn.net/

转载于：
https://primarycolor.blog.csdn.net/article/details/114328549

https://blog.csdn.net/qq_42740797/article/details/120724220?utm_source=app&app_version=4.21.0&code=app_1562916241&uLinkId=usr1mkqgl919blen

<template>
  <div>
    <div class="volution">
      <div class="hot" v-if="hotFlag">热门行业</div>
      <img
        src="../../assets/\img/home/tapLeft.png"
        alt=""
        class="leftImg img"
        loading="lazy"
        @click="toLeft"
      />
      <div class="billboardList" :class="hotFlag ? 'widthFlag' : ''">
        <div v-for="(item, index) in billboardList" :key="index">
          <div class="listItem">{{ item }}</div>
        </div>
      </div>
      <img
        src="../../assets/\img/home/tapLeft.png"
        alt=""
        class="rightImg img"
        loading="lazy"
        @click="toRight"
      />
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted } from "vue";
import $ from "jquery";
export default defineComponent({
  name: "volution",
  components: {},
  props: {
    billboardList: {
      type: Array,
      default: () => [
        "餐饮",
        "家纺",
        "建材",
        "工程机械",
        "金融",
        "环保",
        "宠物",
        "汽车用品",
        "休闲娱乐",
        "医疗保健",
        "农业",
        "服务业",
        "制造业"
        ],
    },
    hotFlag: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    onMounted(() => {
      dragMoveX(".billboardList");
    });
    const dragMoveX = (container) => {
      var flag;//是否进行滚动操作的标记
      var downX;//鼠标相对于浏览器窗口可视区域的X
      var scrollLeft;//实际滚动距离
      //鼠标按下
      $(document.body).on("mousedown", container, function (event) {
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
      });
      //鼠标移动
      $(document).on("mousemove", function (event) {
        if (flag) {
          var moveX = event.clientX;
          var scrollX = moveX - downX;
          $(container).scrollLeft(scrollLeft - scrollX);//让滚动条的位置等于原滚动条位置减去鼠标移动的距离
          //if (scrollX < 0 && scrollLeft > 0) {
            //$(container).scrollLeft(scrollLeft - scrollX);
          //} else {
            //$(container).scrollLeft(scrollLeft - scrollX);
          //}
        }
      });
      //鼠标释放
      $(document).on("mouseup", function () {
        flag = false;
      });
      /**
       * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
       * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
       * */
      //鼠标移出元素
      $(container).on("mouseleave", function (event) {
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
          flag = false;
        }
      });
    };
    const toLeft = () => {
      if ($(".billboardList").scrollLeft() > 0) {
        $(".billboardList").animate({ scrollLeft: 0 });
      }
    };
    const toRight = () => {
      $(".billboardList").animate({
        scrollLeft: $(".billboardList").offset().left,
      });
    };
    return {
      dragMoveX,
      toLeft,
      toRight,
    };
  },
});
</script>
<style lang="less" scoped>
.volution {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  .hot {
    color: #ee0404;
    font-size: 16px;
    margin-right: 20px;
  }
  .img {
    width: 10px;
    height: 18px;
  }
  .leftImg {
    margin-right: 40px;
  }
  .rightImg {
    margin-left: 40px;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    -o-transform: rotate(180deg); /* Opera */
  }
  .billboardList {
    width: 1200px;
    display: flex;
    overflow: auto;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .listItem {
      font-size: 14px;
      padding: 8px 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin: 0 16px;
      white-space: nowrap;
      display: inline-block;
    }
  }
  .listItem:hover {
    color: #fff;
    background-color: #ee0404;
    cursor: pointer;
  }
}
.widthFlag {
  width: 1116px !important;
}
.billboardList::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}

.module {
  display: flex;
  justify-content: center;
  > div {
    width: 1400px;
    height: 100px;
  }
}
</style>