bindEventListener () {let _this = thisthis.menuId = document.querySelector('#navigation-menu-id')this.startX = 0// 上一次的位置 scrollLeftthis.lastLeft = 0this.menuId.onmousedown = function (e) {_this.menuId.onmousemove = _this.onMouseMove_this.menuId.onmouseup = _this.onMouseUpe = 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.eventthis.lastLeft = e.clientX - this.startX// overflow-x: autothis.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;}
}