[TOC]
### 仿天貓超市MenuBar 導航效果
實現思路：
*****
代碼示例：
~~~
<template>
<div class="nav-bar">
<div class="nav-bar-inner">
<!-- nav 滾動區域 -->
<div class="inner-content">
<router-link class="nav-items" to="/1" v-for="(item, index) in bannerItems" :key="index">
<img :src="item.url" :alt="item.title" />
<span>{{item.title}}</span>
</router-link>
</div>
<!-- end -->
</div>
<!-- nav 模擬滾動條 -->
<div class="nav-scroll">
<div class="scroll-inner" :style="realWidth"></div>
</div>
<!-- end -->
</div>
</template>
<script>
export default {
data() {
return {
// nav 數據
bannerItems: [
{
title: "休閑零食",
url:
"https://img.alicdn.com/tps/i4/TB10K5beEGF3KVjSZFvwu2_nXXa.png_300x300Q90s50.jpg_.webp"
},
{
title: "進口美食",
url:
"https://img.alicdn.com/tps/i4/TB1jOe4Xrr1gK0jSZR0wu2P8XXa.png_300x300Q90s50.jpg_.webp"
},
{
title: "進口美食",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食5",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食5",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食6",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食7",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食8",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食9",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
},
{
title: "進口美食10",
url:
"https://img.alicdn.com/tps/i4/TB1TVV4bUuF3KVjSZK9wu2VtXXa.png_240x5000Q50s50.jpg_.webp"
}
],
// 獲取屏幕實際寬度 375 iphone 6
screenW:
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth,
// 獲取滾動內容寬度
scrollContentW: 720,
// 滾動條背景寬度
bgBarW: 48,
// 進度條寬度
barW: 0,
// 起點坐標
startX: 0,
// 結束坐標
endMoveX: 0,
// 移動距離
barMoveX: 0
};
},
// dom ready
mounted() {
// 獲取滾動條的實際寬度
this._getBottomBarWidth();
// 移動端事件監聽
this._bindEvent();
},
methods: {
// 獲取滾動條的實際寬度
_getBottomBarWidth() {
// 滾動條實際寬度 = 滾動條背景寬度 * 屏幕寬度 / 滾動區域寬度
this.barW = this.bgBarW * (this.screenW / this.scrollContentW);
},
// 移動端事件監聽
_bindEvent() {
// 獲取當前組件實例對象
this.$el.addEventListener("touchstart", this._handleTouchStart, false);
this.$el.addEventListener("touchmove", this._handleTouchMove, false);
this.$el.addEventListener("touchend", this._handleTouchEnd, false);
},
// 開始觸摸
_handleTouchStart(event) {
console.log(event.touches);
// 獲取第一個觸摸點
let touch = event.touches[0];
// 求出起始坐標
this.startX = Number(touch.pageX);
},
// 開始移動
_handleTouchMove(event) {
let touch = event.touches[0];
// 求出手指移動距離 移動的距離 - 手指按下的坐標點
let moveX = Number(touch.pageX) - this.startX;
// 求出滾動條移動的距離
this.barMoveX = -(
(this.bgBarW / this.scrollContentW) * moveX -
this.endMoveX
);
// 臨界值處理
if (this.barMoveX <= 0) {
// 左邊
this.barMoveX = 0;
} else if (this.barMoveX >= this.bgBarW - this.barW) {
// 右邊
this.barMoveX = this.bgBarW - this.barW;
}
},
// 結束觸摸
_handleTouchEnd() {
this.endMoveX = this.barMoveX;
}
},
computed: {
// 計算滾動距離
realWidth() {
return {
width: `${this.barW}px`,
left: `${this.barMoveX}px`
};
}
}
};
</script>
<style lang="scss" scoped>
// 外層樣式
.nav-bar {
width: 100%;
height: 184px;
box-sizing: border-box;
display: flex;
justify-content: center;
position: relative;
// 滾動區域樣式
&-inner {
width: 95%;
height: 100%;
box-sizing: border-box;
padding: 10px 0 0;
background-color: #f8f8f8;
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
overflow-x: scroll;
&::-webkit-scrollbar {
display: none;
}
// nav 滾動區域樣式
.inner-content {
width: 720px;
height: 100%;
display: flex;
flex-wrap: wrap;
.nav-items {
flex: 0 0 72px;
width: 72px;
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 60%;
height: auto;
margin-bottom: 6px;
}
span {
font-size: 12px;
color: #999;
}
}
}
}
// nav 模擬滾動條樣式
.nav-scroll {
width: 48px;
height: 2px;
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
background-color: #e5e5e5;
border-radius: 2px;
.scroll-inner {
transition: 0.3s all linear;
position: absolute;
left: 0;
height: 100%;
background-color: #30b30e;
}
}
}
</style>
~~~
*****
