父组件
<template> <div class="home"> <header-tab :listArray="list"> <img :src="imgSrc" alt="" slot="header_tab_img" /> </header-tab> </div> </template> <script> import HeaderTab from "../components/HeaderTab"; export default { name: "home", components: { HeaderTab, }, data() { return { list: [], imgSrc: "", }; }, created() { this.getlist(); this.imgSrc = require("../assets/img/search.png"); }, methods: { getlist() { this.list = [ { id: 1, name: "关注" }, { id: 2, name: "推荐" }, { id: 3, name: "科技" }, { id: 4, name: "财经" }, { id: 5, name: "生活" }, { id: 6, name: "职场" }, { id: 7, name: "时尚" }, { id: 8, name: "汽车" }, { id: 9, name: "娱乐" }, ]; }, }, }; </script> <style lang="less"></style>
子组件
<template> <div class="header"> <div class="header_tab" ref="headertab"> <ul ref="tabitem"> <li v-for="(item, index) in listArray" :key="index" :class="index == current ? 'activeheader' : ''" @click="getTab(index, $event)" > {{ item.name }} </li> </ul> </div> <div class="header_search"> <slot name="header_tab_img"></slot> </div> </div> </template> <script> export default { name: "HeaderTab", props: { listArray: { type: Array, }, }, data() { return { current:1, }; }, methods: { getTab(index, e) { this.current = index; // 高亮当前 let tab =this.$refs.headertab; // 包裹 ul的 div let tabitem = this.$refs.tabitem; // 包裹 li的 ul let winWidth = window.innerWidth; // 当前屏幕的宽度 let liList = e.target; // 当前点击的li if (liList) { // 当前li左偏移, li的宽度, 中间值(当前屏幕的宽度 - li的宽度) /2, 目标值 (中间值 - 当前li左偏移), 整个ul的宽度 let liLeft = liList.offsetLeft, liWidth = liList.offsetWidth, liCenter = (winWidth - liWidth) / 2, liTarget = liLeft - liCenter; let ulWidth = tabitem.offsetWidth; if (liTarget < 0) { tab.scrollLeft = 0; return; } // winWidth(375) - ulWidth(436) = -61 if (liTarget < winWidth - ulWidth) { tab.scrollLeft = -(winWidth - ulWidth) + liWidth; return; } tab.scrollLeft = liTarget; } }, }, }; </script> <style lang="less"> .header { width: 100%; height: 45px; background-color: #fff; display: flex; } .header_tab { width: 90%; height: 45px; display: flex; flex-wrap: nowrap; overflow: scroll; } .header_tab::-webkit-scrollbar { display: none; } ul { display: inline-block; white-space: nowrap; } li { display: inline-block; line-height: 45px; padding: 0px 10px; font-size: 14px; color: #333; // 点击高亮某一项时,将原来的字体变大,会导致没有高亮的元素距离底部有空隙,会出现纵向滚动条 margin-top: -1px; } .activeheader { font-size: 16px; font-weight: 700; position: relative; } .activeheader:after { position: absolute; content: ""; width: 35%; height: 2px; bottom: 0; left: 15px; background-color: #333; border-radius: 50px; } .header_search { width: 10%; height: 45px; position: relative; } .header_search img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style>