1、下载iscroll

2、在需要用到的组件中引入：要用-probe才有onscroll事件

import iScroll from '../../static/js/iscroll-probe.js'

3、使用

（1）html元素

<div class="goods-mume">
	<ul>
		<li class="mume-item border-1px" v-for="(good, idx) in goods" :class="{active: currentIndex === idx}" @click="mumeFood(idx)">
			
		</li>
	</ul>
</div>
<div class="goods-food" ref = "goodsFood">
	<ul>
		<li v-for="good in goods" class="food-item food-item-hook" >
			<ul>
				<li v-for="food in good.foods" >
						
				</li>
			</ul>
		</li>
	</ul>
</div>

（2）样式：子元素的高度大于父元素，父元素超出的部分为hidden

.goods {
		display: flex;
		position: absolute;        /*只显示部分内容防止出现滚动条*/
		top: 193px;
		bottom: 46px;
		overflow: hidden;
	}
	.goods-mume {
		touch-action: none;   /*一定要有*/
		flex: 0 0 80px;      /*前两个设置为0，表示无论如何都不改变*/
		width: 80px;
		background: #f3f5f7;
		font-size: 12px;
		color: rgb(7, 17, 27);
		font-weight: 200;
	}
	.active {
		background: #fff;
		font-weight: 400;
	}
	.goods-food {
		touch-action: none;
		flex: 1;
	}

（3）初始化

created() {
			this.$axios.get("/static/data.json").then(res => {
				this.goods = res.data.goods;
				this.$nextTick(() => {     // dom更新结束后延迟回调，一定要写不然获取不到元素的高，无法滑动
					this.mumeScrollInit(),
					this.goodsScrollInit(),
					this.calFoodsHeight()    // 计算商品各个分类高度
				})
			})
		},
// 方法中的
mumeScrollInit() {
				let mumeScroll = new iScroll(".goods-mume", {
					scrollbars: false,        // 不显示滚动条
       				bounce: true,            // 有回弹效果
       				mouseWheel:true,        // 鼠标滚轮 
       				probeType: 3            // 当使用onscroll时，指定触发的频率，probeType：1   滚动不繁忙的时候触发;probeType：2 滚动时每隔一定时间触;probeType：3 每滚动一像素触发一次
				})
			},
			goodsScrollInit() {
				this.goodsScroll = new iScroll(".goods-food", {
					scrollbars: false,
       				bounce: true,
       				mouseWheel:true,
       				probeType: 3
				});
			
			},

（4）调用

created() {
	this.$axios.get("/static/data.json").then(res => {
		this.goods = res.data.goods;
		this.$nextTick(() => {     // dom更新结束后延迟回调，一定要写不然获取不到元素的高，无法滑动
			this.mumeScrollInit(),
			this.goodsScrollInit(),
            this.calFoodsHeight()    // 计算商品各个分类高度
		})
	})
},

4、当滚动时，左边联动：先计算出右边商品每个分类的高，根据高计算出左边的索引，左边的索引加样式

（1）计算高度

methods: {
			mumeScrollInit() {
				
			},
			goodsScrollInit() {
				
			},
			calFoodsHeight() {
				// 获取所有分类，$els.goods就是v-el:goods，一般类名加-hook表示用于js操作，没其他作用
				let foodList = this.$refs.goodsFood.querySelectorAll(".food-item-hook"); 
				let height = 0;   
				this.foodHeight.push(height);   // 初始为0，并递增
				for(let i=0; i < foodList.length; i++) {
					let item = foodList[i];
					height += item.clientHeight;
					this.foodHeight.push(height);    // 当前的高度等于前面元素相加的高度，
				}
			},
			
		}

（2）计算索引

computed: {
			currentIndex() {    // 根据当前高度，计算商品分类的索引，当前高度在自己和下一个分类高度之间
				for(let i=0; i<this.foodHeight.length; i++) {    
					let height1 = this.foodHeight[i];
					// 代表是最后一个分类，不用food..[i+1],是因为超出了索引
					if(i+1 == this.foodHeight.length && this.currentHeight >= this.foodHeight[i]) {
						return i;
					}
					let height2 = this.foodHeight[i+1];
					if(this.currentHeight >= height1 && this.currentHeight < height2) {
						return i;    // 返回当前商品分类的索引
					}
				}
				return 0;
			}
		},

（3）根据html中的索引获取类样式

3、点击左边的菜单，联动右边，在html中加click事件

methods: {
			mumeScrollInit() {
				
			},
			goodsScrollInit() {
				
			},
			calFoodsHeight() {
				
			},
			mumeFood(idx) {
				let curr = this.$refs.goodsFood.querySelectorAll(".food-item-hook")[idx];			
				this.goodsScroll.scrollToElement(curr, 300);    // 滚到某个元素，300毫秒
				console.log(idx, this.foodHeight[idx], this.currentHeight);
			}
		}