[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>
~~~
*****
