仿淘宝菜单栏左右滑动（VUE 移动端）

• 可通过左右滑动上方的结构来实现下方滑块的跟随移动；
  个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用
  具体效果：
  

HTML

*使用两个数组分为上下两行 单个盒子设置固定宽度（以便后面进行计算）在包裹这两行数组的最外层盒子“menuItemsNav”添加 @scroll="scrollEvent 事件
*如果后台返回的是一个数组，可以根据下标奇、偶数来划分为两个数组

<!-- 菜单分类 -->  
		<div class="menuItems">
			<div style="overflow: hidden;">
				<div class="menuItemsNav" ref="menuItemsNav" @scroll="scrollEvent">
					<div class="menuItemsNav_1">
						<div class="menuItemsNav_1Dv" v-for="(item , index) in nav_list.oneList" :key="index" @click="menuNav_1(item , index)">
							<img src="../assets/image/02.png" alt="" />
							<span>{{item.name}}</span>
						</div>
					</div>
					<div class="menuItemsNav_2">
						<div class="menuItemsNav_1Dv" v-for="(item , index) in nav_list.twoList" :key="index" @click="menuNav_2(item , index)">
							<img src="../assets/image/02.png" alt="" />
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
			</div>


			<div v-if="slideShow" class="menuItemsBottom">
				<div class="menuItemsBottomBig">
					<div class="menuItemsBottomSmall" :style="{'margin-left':Left <= 0? 0:Left+'rem' , 'width':showSmallLength<=0?'100%':showSmallLength+'rem'}"></div>
				</div>

			</div>
		</div>

CSS
*设置 两个数组外层包裹的盒子“menuItemsNav ”属性为 overflow-x: scroll;固定宽度；

/* 菜单分类 */
	.menuItems {
		width: 13.829rem;
		height: 6.213rem;
		background: #fff;
		margin-top: 1.808rem;
		margin-bottom: 0.553rem;
		border-radius: 0.212rem;
		padding: 0.425rem 0.638rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.menuItemsNav {
		width: 13.829rem;
		display: flex;
		flex-direction: column;
		overflow-x: scroll;
		padding-bottom: 0.638rem;
	}

	.menuItemsNav::-webkit-scrollbar {
		display: none
	}

	.menuItemsNav_1 {
		margin-bottom: 0.34rem;
	}

	.menuItemsNav_1,
	.menuItemsNav_2 {
		width: 13.829rem;
		display: -webkit-box;
		align-items: center;
	}

	.menuItemsNav_1Dv {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 2.7658rem;
	}

	.menuItemsNav_1Dv img {
		width: 1.829rem;
		height: 1.829rem;
		border-radius: 50%;
	}

	.menuItemsNav_1Dv span {
		color: rgba(117, 117, 117, 100);
		font-size: 0.51rem;
		margin-top: 0.17rem;
	}


	.menuItemsBottom {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.menuItemsBottomBig {
		width: 2.276rem;
		height: 0.127rem;
		border-radius: 0.382rem;
		background-color: rgba(224, 224, 224, 100);
		text-align: center;
		border: 0.021rem solid rgba(255, 255, 255, 100);
		overflow: hidden;
	}

	.menuItemsBottomSmall {
		top: 0;
		width: 0.876rem;
		height: 0.127rem;
		background-color: red;
		border-radius: 0.382rem;
		margin-left: 0.212rem;
	}

JS
*getRatio事件主要是获取滑块的宽度 和 滚动列表长度与滑条长度比例
*scrollEvent事件通过从getRatio事件获取到的比例值，得出滑块的向左偏移的距离 通过绑定样式动态赋值上去:style="{‘margin-left’:Left <= 0? 0:Left+‘rem’}"

// 获取菜单栏的左右滚动距离
scrollEvent(e) {
	let that = this;
	let menuItemsNav = that.$refs.menuItemsNav;
    // menuItemsNav.scrollLeft 得到当前元素向左滚动了多少距离单位：PX   我这边根据我rem比例将距离转为了rem
	let menuItemsNavLeft = (menuItemsNav.scrollLeft / 47).toFixed(3)
	that.Left = menuItemsNavLeft * that.slideRatio;  // Left 就是margin-left所以要的数值
},
//根据分类获取比例 单个数组小盒子2.7658 滑块盒子：2.276  总宽：13.829 单位rem
getRatio() {
	let that = this;
     //这块的判断是当数组的个数没超过最外层元素的宽度时，，滑块隐藏 
	if (!that.nav_list.oneList || that.nav_list.oneList.length <= 5) {
		that.slideShow = false;
	} else {
		let _totalLength = that.nav_list.oneList.length * 2.7658; //分类列表总长度
		let _showLength = (13.829 / _totalLength * 2.276).toFixed(3); //动态显示当前滑条的宽度
		let _ratio = 2.276 / _totalLength * (15.957 / (document.body.clientWidth / 47).toFixed(3)); //滚动列表长度与滑条长度比例
		that.slideRatio = _ratio.toFixed(3)
		that.showSmallLength = _showLength
		that.slideShow = true;
	}
}