优化商品分类选中效果

src/view/goods-classify.vue

@@ -61,11 +61,12 @@
 	        	goodsList: [],
 	        	imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
 	        	listHeight: [], //存储区块的高度
-	        	scrollY: {}
+	        	scrollY: {},
+	        	currentNum: 0
 	        }
 	    },
 	    computed: {     
-	    	currentIndex () {
+	    	/*currentIndex () {
 				const { scrollY, listHeight } = this
 				let index = listHeight.findIndex((height, index) => {
 					return scrollY >= listHeight[index] && scrollY < listHeight[index + 1]
@@ -74,6 +75,26 @@
 					index++
 				}
 				return index
+			}*/
+
+			currentIndex(){
+				for (let i = 0; i < this.listHeight.length; i++){
+					let height = this.listHeight[i]
+					let height2 = this.listHeight[i + 1]
+					//当height2不存在的时候，或者落在height和height2之间的时候，直接返回当前索引
+					//>=height,是因为一开始this.scrollY=0,height=0
+					if( !height2 || (this.scrollY >= height && this.scrollY < height2)) {
+						return i
+					}
+					if(this.listHeight[this.listHeight.length-1] - this.$refs.foodWrapper.clientHeight <= this.scrollY ) {
+						if(this.clickTrue) {
+							return this.currentNum
+						} else {
+							return (this.listHeight.length-1)
+						}
+					}
+				}
+				return 0
 			}
 	    },
 	    components: {
@@ -152,13 +173,26 @@
 					this.listHeight.push(height);    
 				}
 			},
-			selectMenu(index, event) {        
+			/*selectMenu(index, event) {        
 				if(event && !event._constructed) {          
 					return ;        
 				}        
 				let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");        
 				let el = foodList[index];        
 				this.foodsScroll.scrollToElement(el,300)
+			},*/
+			selectMenu(index, event){
+				this.clickTrue = true //触发过剑姬事件之后，clickTrue的值变为true
+				this.currentNum = index
+				//在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
+				// 浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
+				if (event && !event._constructed){
+					return
+				} else {
+					let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");        
+					let el = foodList[index];        
+					this.foodsScroll.scrollToElement(el,300)
+				}
 			},
 			autoSelect() {
 				for (let i = 0; i < this.goodsList.length; i++) {