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

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

案例：

原理：点击按钮，改变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" ><liv-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-badgeclass="mark":value="messageTotal"v-if="messageTotal > 0"/></router-link></li></ul> --><!-- 当前角色 --><divclass="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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！