【秒杀商品详情】

1. 接入滚动逻辑

pages/activity/goods_seckill_details/index.vue

@@ -5,7 +5,7 @@
 			<view class='navbarH' :style='"height:"+navH+"rpx;"'>
 				<view class='navbarCon acea-row row-center-wrapper'>
 					<view class="header acea-row row-center-wrapper">
-						<view class="item" :class="navActive === index ? 'on' : ''" v-for="(item,index) in navList" :key='index' @tap="tap(item,index)">
+						<view class="item" :class="navActive === index ? 'on' : ''" v-for="(item,index) in navList" :key='index' @tap="tap( index)">
 							{{ item }}
 						</view>
 					</view>
@@ -259,7 +259,6 @@
 				opacity: 0,
 				scrollY: 0,
 				topArr: [],
-				toView: '',
 				height: 0,
 				heightArr: [],
 				lock: false,
@@ -943,67 +942,68 @@
       },
       // #endif
 
-      // TODO 芋艿：暂未整理
+      // ========== 顶部 nav 相关的方法 ==========
-
+      /**
-			// 后退
+       * 后退
-			returns: function() {
+       */
-				uni.navigateBack()
+      returns: function() {
-			},
+        uni.navigateBack()
-
+      },
-
+      /**
-			scroll: function(e) {
+       * 点击指定 nav bar
-				var that = this,
+       *
-					scrollY = e.detail.scrollTop;
+       * @param index 新的 navList 位置
-				var opacity = scrollY / 200;
+       */
-				opacity = opacity > 1 ? 1 : opacity;
+      tap: function(index) {
-				that.opacity = opacity
+        this.$set(this, 'navActive', index);
-				that.scrollY = scrollY
+        this.$set(this, 'lock', true);
-				if (that.lock) {
+        this.$set(this, 'scrollTop', index > 0 ? this.topArr[index] - (app.globalData.navHeight / 2)
-					that.lock = false
+          : this.topArr[index]);
-					return;
+      },
-				}
+      /**
-				for (var i = 0; i < that.topArr.length; i++) {
+       * 滚动
-					if (scrollY < that.topArr[i] - (app.globalData.navHeight / 2) + that.heightArr[i]) {
+       *
-						that.navActive = i
+       * @param e 滚动事件
-						break
+       */
-					}
+      scroll: function(e) {
-				}
+        const scrollY = e.detail.scrollTop;
-			},
+        let opacity = scrollY / 200;
-			tap: function(item, index) {
+        opacity = opacity > 1 ? 1 : opacity;
-				var id = item.id;
+        this.$set(this, 'opacity', opacity);
-				var index = index;
+        this.$set(this, 'scrollY', scrollY);
-				var that = this;
+        if (this.lock) {
-				// if (!this.data.good_list.length && id == "past2") {
+          this.$set(this, 'lock', false)
-				//   id = "past3"
+          return;
-				// }
+        }
-				this.toView = id;
+        // 设置选中的 nav
-				this.navActive = index;
+        for (let i = 0; i < this.topArr.length; i++) {
-				this.lock = true;
+          if (scrollY < this.topArr[i] - (app.globalData.navHeight / 2) + this.heightArr[i]) {
-				this.scrollTop = index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]
+            this.$set(this, 'navActive', i)
-			},
+            break
-			infoScroll: function() {
+          }
-				var that = this,
+        }
-					topArr = [],
+      },
-					heightArr = [];
+      /**
-				for (var i = 0; i < that.navList.length; i++) { //productList
+       * 处理器滚动条
-					//获取元素所在位置
+       */
-					var query = wx.createSelectorQuery().in(this);
+      infoScroll: function() {
-					var idView = "#past" + i;
+        const topArr = [];
-					// if (!that.data.good_list.length && i == 2) {
+        const heightArr = [];
-					//   var idView = "#past" + 3;
+        for (let i = 0; i < this.navList.length; i++) {
-					// }
+          // 获取元素所在位置
-					query.select(idView).boundingClientRect();
+          const query = wx.createSelectorQuery().in(this);
-					query.exec(function(res) {
+          const idView = "#past" + i;
-						var top = res[0].top;
+          query.select(idView).boundingClientRect();
-						var height = res[0].height;
+          query.exec(function(res) {
-						topArr.push(top);
+            const top = res[0].top;
-						heightArr.push(height);
+            const height = res[0].height;
-						that.topArr = topArr
+            topArr.push(top);
-						that.heightArr = heightArr
+            heightArr.push(height);
-					});
+            this.$set(this, 'topArr', topArr);
-				}
+            this.$set(this, 'heightArr', heightArr);
-			},
+          });
-
+        }
+      },
 
       fen2yuan(price) {
         return Util.fen2yuan(price)