锚点定位

zhiyangdu
1 parent 166aae06
Showing 1 changed file with 84 additions and 44 deletions
src/pages/pointsMall/pointsMall.vue
@@ -33,18 +33,10 @@
                 </div>
               </div>
               <!-- 商品类型 -->
-              <div class="item_box">
-                <div class="item">
-                  <img src="static/img/points_item01.png" alt=""/>
-                  <div class="text">实物商品</div>
-                </div>
-                <div class="item">
-                  <img src="static/img/points_item02.png" alt=""/>
-                  <div class="text">虚拟商品</div>
-                </div>
-                <div class="item">
-                  <img src="static/img/points_item03.png" alt=""/>
-                  <div class="text">满减红包</div>
+              <div class="item_box" v-if="navs && navs.length">
+                <div class="item" v-for="(item, index) in navs" :key="index" @click="anchor(item)">
+                  <img :src="item.simg" alt=""/>
+                  <div class="text">{{item.title}}</div>
                 </div>
               </div>
               <!--积分赚取  -->
@@ -72,46 +64,51 @@
             <!-- 实物商品 -->
-            <div class="tab_item_box">
-              <div class="item active">实物商品</div>
-              <!-- 分割线 -->
-              <div class="line"> </div>
-              <div class="item">实物商品实物商品实物商品实物商品</div>
+            <div ref="physicalGoodsBox">
+              <div class="tab_item_box">
+                <div class="item active">实物商品</div>
+                <!-- 分割线 -->
+                <div class="line"> </div>
+                <div class="item">实物商品实物商品实物商品实物商品</div>
+              </div>
+              <!-- 实物商品裂变 -->
+              <!-- 商品样式 7 列表 -->
+              <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
+                  :lists="phyicalGoods"
+                  com="7">
+              </column-list-box>
             </div>
-            <!-- 实物商品裂变 -->
-            <!-- 商品样式 7 列表 -->
-            <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
-                :lists="phyicalGoods"
-                com="7">
-            </column-list-box>
             <!-- 虚拟商品 -->
-            <div class="tab_item_box">
-              <div class="item active">虚拟商品</div>
-              <!-- 分割线 -->
-              <div class="line"> </div>
-              <div class="item">热门商品</div>
+            <div ref="virtualGoodsBox">
+                <div class="tab_item_box">
+                  <div class="item active">虚拟商品</div>
+                  <!-- 分割线 -->
+                  <div class="line"> </div>
+                  <div class="item">热门商品</div>
+                </div>
+                <!-- 商品样式 7 列表 -->
+                <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
+                    :lists="virtualGoods"
+                    com="7">
+                </column-list-box>
             </div>
-            <!-- 商品样式 7 列表 -->
-            <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
-                :lists="virtualGoods"
-                com="7">
-            </column-list-box>
-
             <!-- 满减红包 -->
-            <div class="tab_item_box">
-              <div class="item active">满减红包</div>
-              <!-- 分割线 -->
-              <div class="line"> </div>
-              <div class="item">热门商品</div>
+            <div ref="fullReductionBox">
+                <div class="tab_item_box">
+                  <div class="item active">满减红包</div>
+                  <!-- 分割线 -->
+                  <div class="line"> </div>
+                  <div class="item">热门商品</div>
+                </div>
+                <!-- 商品样式 7 列表 -->
+                <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 
+                    :lists="redEnvelopeFull"
+                    com="7">
+                </column-list-box>
             </div>
-            <!-- 商品样式 7 列表 -->
-            <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 
-                :lists="redEnvelopeFull"
-                com="7">
-            </column-list-box>
         </div>
 </div>
 </template>
@@ -128,6 +125,7 @@ export default {
     return {
       title: "",              // 标题
       backs: null,            // 后退按钮组
+      navs: null, // 导航
       myGrade: 0, // 我的积分
       goodsLists: null,  // 为你推荐商品
       phyicalGoods: { list: null }, // 实物商品
@@ -154,6 +152,30 @@ export default {
   //方法表示一个具体的操作，主要书写业务逻辑；
   methods: {
     /**
+      * 锚点定位
+      * @param {Object} item [数据对象]
+      */
+    anchor (item) {
+      // 判断锚点是否存在
+      if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {
+
+        // 根据头部设置锚点位置
+        let safeDistance = 0;
+
+        // 判断是否有callApp组件
+        if (typeof this.$refs.callApp === 'object') {
+          safeDistance += this.$refs.callApp.$el.clientHeight;
+        }
+
+        // 判断是否有backBox组件
+        if (typeof this.$refs.backBox === 'object') {
+          safeDistance += this.$refs.backBox.$el.clientHeight;
+        }
+
+        document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750));
+      }
+    },
+    /**
     * 跳转到兑换记录详情页
     * @param {Object} item [数据对象]
     */
@@ -301,6 +323,24 @@ export default {
     // 设置标题
     this.$set(this, "title", "积分商城");
+    // 设置锚点定位数据
+    this.$set(this, 'navs', [
+      {
+        ref: 'physicalGoodsBox',
+        simg: 'static/img/points_item01.png',
+        title: '实物商品'
+      },
+      {
+        ref: 'virtualGoodsBox',
+        simg: 'static/img/points_item02.png',
+        title: '虚拟商品'
+      },
+      {
+        ref: 'fullReductionBox',
+        simg: 'static/img/points_item03.png',
+        title: '满减红包'
+      }
+    ]);
     // 判断是否在App内
     if (this.isCNLive.value) {