bindEventListener () {
let _this = this
this.menuId = document.querySelector('#navigation-menu-id')
this.startX = 0
// 上一次的位置 scrollLeft
this.lastLeft = 0
this.menuId.onmousedown = function (e) {
_this.menuId.onmousemove = _this.onMouseMove
_this.menuId.onmouseup = _this.onMouseUp
e = e || window.event
// 如果上次有记录
if (_this.lastLeft > 0) {
// 减掉上次的距离
_this.startX = e.clientX - _this.lastLeft
} else {
_this.startX = e.clientX - _this.menuId.scrollLeft
_this.startX = e.clientX
}
}
},
onMouseMove (e) {
e = e || window.event
this.lastLeft = e.clientX - this.startX
// overflow-x: auto
this.menuId.scrollLeft = -(e.clientX - this.startX)
},
onMouseUp () {
this.menuId.onmouseup = this.menuId.onmousemove = null
},
<ul class="navigation-left-menu" id="navigation-menu-id">
<template v-for="(item, index) in navigationMenuList">
<li :key="index" :class="{ active: index === navigationMenuIndex }">
{{item.name}}
<p class="menu-selected-line"></p>
</li>
</template>
</ul>
.navigation-left-menu {
display: flex;
align-items: center;
background-color: white;
overflow-x: auto;
overflow-y: hidden;
height: 40px;
width:100%;
padding: 0 16px;
cursor: move;
li {
color: #333333;
font-size: 14px;
margin-right: 35px;
flex-shrink: 0;
white-space: nowrap;
cursor: pointer;
/*设置文字无法选中*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
li:last-child {
margin-right: 0;
}
li.active {
color: #F85822;
font-weight: 600;
position: relative;
.menu-selected-line {
position: absolute;
height: 2px;
width: 90%;
bottom: -10px;
background-color: #F85822;
}
}
}
.navigation-left-menu::-webkit-scrollbar {
display: none;
}
}