左右切换箭头代替滚动条，实现类似走马灯效果

当头部导航过多，内容放不下的时候，用左右切换箭头代替滚动条，实现类似走马灯效果

案例：

原理：点击按钮，改变left值即可

<template>
  <!-- 首页头部 -->
  <div class="index_headerMain">
    <!-- Logo -->
    <div class="platform_Logo">
      <a href="javascript:void(0);">
        <div class="logo_imgMain">甘”系统</div>
        <!-- <div class="unit_names">{{ $store.state.user.legalName }}</div> -->
      </a>
    </div>
    <!-- 头部导航 -->
    <div class="head_navs scroll-box" ref="scrollOuter" @mouseScroll.prevent="handlescroll" @mousewheel.prevent="handlescroll">
      <!-- 左箭头 (<) -->
      <i @click="leftbtnCilck" class="left-btn" v-if="this.$store.state.etsMenuList.length >= 8">&lt;</i>
      <ul ref="scrollBody" class="scroll-body" >
        <li
          v-show="item.isShow === '1'"
          @click="showSlideBarList(item, index)"
          v-for="(item, index) in this.$store.state.etsMenuList"
          :style="{left: tagBodyLeft+'px'}"
          :key="index"
          :class="{
            active: menuActiveId === item.id || (isFrist == '1' && index == 0),
          }"
        >
          <a href="javascript:void(0);">{{ item.name }}</a>
          <!-- <em>0</em> -->
        </li>
      </ul>
      <!-- 右箭头 (>) -->
      <i @click="rightbtnCilck" class="right-btn" v-if="this.$store.state.etsMenuList.length >= 8">&gt;</i>
    </div>
    <!-- 帮助及用户操作 -->
    <div class="seach_help_remind clear" :class="{noNameLimit:this.$store.state.etsMenuList.length >= 8}">
      <!-- <ul>
        <li>
          <router-link :to="'message-workbench-message-list'">
            <img src="@/ets-ui/img/tixing_icon.png" />
            <el-badge
              class="mark"
              :value="messageTotal"
              v-if="messageTotal > 0"
            />
          </router-link>
        </li>
      </ul> -->
      <!-- 当前角色 -->
      <div
        class="principal_backstageLink"
        v-if="
          $store.state.user.roleCode == '01' ||
          $store.state.user.roleCode == '02' ||
          $store.state.user.roleCode == '03'
        "
      >
        <a href="javascript:void(0);">
          当前角色：<span>{{ this.$store.state.roleName }}</span></a
        >
      </div>
      <!-- <div class="user_Opeartion" style="height: 60px; line-height: 60px"> -->
      <div class="user_Opeartion">
        <el-dropdown placement="bottom" :show-timeout="0">
          <span class="el-dropdown-link">
            <img src="@/ets-ui/img/user_img.png" />
            <span>{{ $store.state.user.name }}</span>
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logoutHandle()">{{
              $t("logout")
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import screenfull from "screenfull";
import { clearLoginInfo } from "@/utils";
export default {
  data() {
    return {
      isFrist: "1",
      menuActiveId: "", // 招标平台下 首页的菜单id，默认加载首页
      updatePasswordVisible: false,
      messageTip: false,
      messageTotal: sessionStorage.getItem("messageTotal"),
      timer: "",
      menuList: [],
      tagBodyLeft: 0,
      offset: 120,
      allMenuList: this.$store.state.etsMenuList
    };
  },
  created() {
    // 刷新后菜单选中状态
    let firstMenuId = sessionStorage.getItem("firstMenuId");
    if (
      this.menuActiveId != firstMenuId &&
      firstMenuId != null &&
      firstMenuId != "null"
    ) {
      this.isFrist = "0";
    }
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    //折叠多余菜单
    getMenuList() {
      let maxWidth = window.screen.availWidth;
      let width = maxWidth - 320 - 140 - 60;
      let num = Math.floor(width / 125);

      this.menuList = this.allMenuList.slice(0, num - 1);
      let lastMenu = {
        id: "1473215932109750274",
        isShow: "1",
        name: "其他菜单",
        parentName: null,
        permissions: "",
        pid: "0",
        sort: num,
        type: 0,
        children: this.allMenuList.slice(num),
      };
      this.menuList.push(lastMenu);
      console.log(this.menuList);
    },
    showSlideBarList(firstMenu, index) {
      if (index == 0) {
        this.isFrist = "1";
      } else {
        this.isFrist = "0";
      }
      sessionStorage.setItem("secondMenu", "{}");
      sessionStorage.removeItem("TENDER_PROJECT_NAME");
      this.menuActiveId = firstMenu.id;
      this.$emit("slideBarList", firstMenu);
    },
    // 全屏
    fullscreenHandle() {
      if (!screenfull.enabled) {
        return this.$message({
          message: this.$t("fullscreen.prompt"),
          type: "warning",
          duration: 500,
        });
      }
      screenfull.toggle();
    },
    // 退出
    logoutHandle() {
      this.$confirm(
        this.$t("prompt.info", { handle: this.$t("logout") }),
        this.$t("prompt.title"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .post("/auth/oauth/logout")
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              clearLoginInfo();
              // 清除菜单定位
              sessionStorage.setItem("firstMenu", "{}");
              sessionStorage.setItem("secondMenu", "{}");
              sessionStorage.removeItem("roleId");
              sessionStorage.removeItem("roleCode");
              sessionStorage.removeItem("firstMenuId");
              var login_type = sessionStorage.getItem("login_type");
              if (login_type == "digital_government") {
                sessionStorage.removeItem("login_type");
                window.location.href =
                  window.SITE_CONFIG["unifiedAuthUrl"] +
                  "/gsCityLogOut?backUrl=" +
                  encodeURIComponent(window.SITE_CONFIG["loginUrl"]);
              } else {
                this.$router.push({ name: "login" });
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    //获取通知
    getMessageLogs() {
      this.$http
        .get("/gkzb/gkzbmessagelogs/unReadMessageTotal", {
          params: {
            userType: this.$store.state.user.userType,
          },
        })
        .then(({ data: res }) => {
          if (res.code == 0) {
            sessionStorage.setItem("messageTotal", res.data);
          } else {
            sessionStorage.setItem("messageTotal", 0);
          }
        });
    },
    handlescroll(e){
      this.btnCilck(e.wheelDelta)
    },
    //左侧按钮点击
    leftbtnCilck(){
      if(this.tagBodyLeft <= -this.offset){  //如果是一开始，则左侧按钮是不可点击的。
        this.tagBodyLeft = this.tagBodyLeft + this.offset
      }
    },
    //右侧点击
    rightbtnCilck(){
      console.log(this.tagBodyLeft,'2')
      this.tagBodyLeft = this.tagBodyLeft - this.offset
    }
  },
};
</script> 
<style lang="scss" scoped>
//头部导航
.head_navs{
		position: relative;
		width: calc(100vw - 569px);
		overflow-x: auto;
		overflow-y: clip;
		ul {
		    overflow-y: clip;
			width: 95%;
			height: 60px;
			line-height: 60px;
			white-space:nowrap;
			position: absolute;
			left: 50% !important;
			transform: translateX(-50%);
			overflow-x: hidden;
			}
		li{
			position: relative;
			height: 60px;
			line-height: 60px;
			color: rgba(255,255,255,.65);
			display: inline-block;
			padding: 0 16px;
			user-select: none;
			transition: all 0.5s linear;
			&:hover,
			&.active{
				color: #FFFFFF;
				text-shadow: 0 0 0 #FFFFFF;
				background: linear-gradient(360deg, rgba(0, 89, 255, 0.04) 0%, rgba(49, 113, 255, 0.65) 100%);
			}
			a{
				font-size: 16px;
			}
			em{
				position: absolute;
				top: 8px;
				right: 0;
				display: inline-block;
				padding: 0 10px;
				height: 20px;
				border-radius: 10px;
				background-color: #FFE6E6;
				color: #FF4D4F;
				font-size: 12px;
			}
		}
	}
/* 外层盒子 */
.noNameLimit {
  width: 140px !important;
}
.scroll-box{
  position: relative;
  height: 60px;
  overflow: hidden;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
/* 移动的盒子 */
.scroll-body{
  position: relative;
  height: 100%;
  transition: all .4s;
}
/* 左右箭头 */
.left-btn,.right-btn {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(59, 153, 230);
  background-color: rgba(36,75,172,1);
  transform: translateY(-50%);
  z-index: 99;
  cursor: pointer;
}
.left-btn{
  left: 0;
}
.right-btn {
  right: 0;
} 
</style>