我想要我的导航栏上的一个功能,如果我的导航栏的宽度大于其父 div,则淡化它的最右侧并向其添加一个新按钮。类似于 Youtube 的东西。
1- 当导航栏的宽度大于其父 div 时,它看起来像这样:
2- 当 Navbar 的宽度小于其父 div 时,它看起来像这样:
我怎样才能做到这一点?
这也是我的导航栏:
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light pl-4">
<form class="form-inline" v-for="(genre, index) in genres" :key="index">
<button class="btn btn-outline-dark m-1" type="button">
{{ genre }}
</button>
</form>
</nav>
</template>
<script>
export default {
data() {
return {
genres: [
.
.
.
"REALITY TV",
"SPORTS",
"HORROR"
]
};
}
};
</script>
最佳答案
所以,你需要做什么(也是我认为 youtube 正在做的事情):
transform: translateX(0px)
手动滚动容器. 这是 codesandbox with working demo .
还添加以下代码:
<template>
<div>
<nav class="navbar" ref="navbar">
<div class="left-arrow" v-if="translateX < 0">
<div class="left-arrow-button" v-on:click="moveLeft"><</div>
</div>
<div class="scroll-container" ref="scroll" :style="scrollStyle">
<div class="btn" v-for="(genre, index) in genres" :key="index">
{{ genre }}
</div>
</div>
<div class="right-arrow" v-if="translateX > minVal">
<div class="right-arrow-button" v-on:click="moveRight">></div>
</div>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
genres: [
"GENRE 1",
"GENRE 2",
"GENRE 3",
"GENRE 4",
"GENRE 5",
"GENRE 6",
"GENRE 7",
"GENRE 8",
"REALITY TV",
"SPORTS",
"HORROR",
],
scrollWidth: 0,
navbarWidth: 0,
translateX: 0,
};
},
computed: {
scrollStyle: function () {
return {
transform: `translateX(${this.translateX}px)`,
};
},
minVal: function () {
return -(this.scrollWidth - this.navbarWidth);
},
},
mounted() {
this.getScrollWidth();
},
methods: {
getScrollWidth() {
this.scrollWidth = this.$refs.scroll.clientWidth;
this.navbarWidth = this.$refs.navbar.clientWidth;
// console.log(this.scrollWidth, this.navbarWidth);
},
moveRight() {
const newVal = this.translateX - this.navbarWidth / 2;
this.translateX = Math.max(this.minVal, newVal);
},
moveLeft() {
const newVal = this.translateX + this.navbarWidth / 2;
this.translateX = Math.min(0, newVal);
},
},
};
</script>
<style scoped>
.navbar {
display: flex;
flex-direction: row;
overflow: hidden;
position: relative;
/* width: 500px; */
}
.scroll-container {
display: flex;
}
.btn {
margin: 0 8px;
padding: 8px 16px;
background-color: grey;
border-radius: 16px;
}
.left-arrow {
position: absolute;
left: 0;
z-index: 1000;
height: 100%;
display: flex;
}
.left-arrow::after {
background: linear-gradient(to right, white 20%, rgba(255, 255, 255, 0) 80%);
height: 100%;
width: 50px;
content: "";
pointer-events: none;
}
.left-arrow-button {
display: flex;
align-items: center;
background-color: white;
cursor: pointer;
}
.right-arrow {
position: absolute;
right: 0;
z-index: 1000;
height: 100%;
display: flex;
}
.right-arrow::before {
background: linear-gradient(to left, white 20%, rgba(255, 255, 255, 0) 80%);
height: 100%;
width: 50px;
content: "";
pointer-events: none;
}
.right-arrow-button {
display: flex;
align-items: center;
background-color: white;
cursor: pointer;
}
</style>
我使用的是纯 css 和 html 标签,如果您使用 Bootstrap 或类似的东西进行样式设置,您可以轻松地更新代码以使用该样式。此外,我还没有实现任何动画来使滚动平滑,我认为 youtube 会这样做。为了使答案简短并专注于一个问题,我跳过了它。您可以自己尝试这样做,如果您遇到任何问题,请为此提出单独的问题。
关于javascript - 如何淡出导航栏的最右侧并向其添加新按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66649383/