为了解决“滑动时不能点击链接”

@@ -66,6 +66,9 @@ $(() => {
 
     // 拦截页面内所有 a 标签的跳转
     $body.on('click', 'a[href]', function() {
+        if ($(this).hasClass('no-link')) {
+            return false;
+        }
         if (!$(this).hasClass('no-intercept')) {
             let href = $(this).attr('href');
 

@@ -3,16 +3,16 @@
         <ul class="cardlist card-large clearfix">
             <li class="card" v-for="(item, index) in data" :key="item.product_skn" @click="clickProduct(item, index)">
                 <div class="card-pic">
-                    <a v-good-href="item">
+                    <a v-good-href="item" :class="hrefClass">
                         <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
                     </a>
                 </div>
                 <div class="card-bd">
                     <h2 class="card-label">
-                        <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
+                        <a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
                     </h2>
                     <h2 class="card-label-desc" v-if="item.product_name1">
-                        <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
+                        <a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
                     </h2>
                     <span class="good-price" :class="{'sale-price': item.market_price}">¥{{item.sales_price | toFixed}}</span>
                     <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span>
@@ -30,147 +30,189 @@
     </div>
 </template>
 <script>
-    import Vue from 'vue';
-    import lazyload from 'vue-lazyload';
-    import infinitScroll from 'vue-infinite-scroll';
-    import bus from 'common/vue-bus';
-
-    Vue.use(lazyload, { preLoad: 3 });
-    Vue.use(infinitScroll);
-
+import Vue from 'vue';
+import lazyload from 'vue-lazyload';
+import infinitScroll from 'vue-infinite-scroll';
+import bus from 'common/vue-bus';
+
+Vue.use(lazyload, { preLoad: 3 });
+Vue.use(infinitScroll);
+
+export default {
+    data() {
+        return {
+            hrefClass: {}
+        };
+    },
+    props: {
+        /* 开启滚动加载 */
+        disableFetch: Boolean,
+
+        // 数据
+        data: Array,
+        state: [Number, Object]   // -1: 无数据 0: 全部加载完  1: 正在加载
+    },
+    computed: {
+        // 空列表: data.length === 0
+        whenEmpty() {
+            return !this.data.length;
+        }
+    },
+    mounted() {
+        const $scrollEl = this.getScrollEventTarget(this.$el);
+
+        $scrollEl.addEventListener('scroll', this.throttle(this.scrollEnd, 200));
+    },
+    methods: {
+        fetch: function() {
+            bus.$emit('list.paging');
+        },
+        clickProduct(item, index) {
+            this.$emit('click-product', item, index);
+        },
+        scrollEnd() {
+            this.hrefClass = {};
+        },
+        getScrollEventTarget(element) {
+            let getComputedStyle = document.defaultView.getComputedStyle;
+            let currentNode = element;
 
-    export default {
-        props: {
-            /* 开启滚动加载 */
-            disableFetch: Boolean,
+            while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
+                let overflowY = getComputedStyle(currentNode).overflowY;
 
-            // 数据
-            data: Array,
-            state: [Number, Object]   // -1: 无数据 0: 全部加载完  1: 正在加载
-        },
-        computed: {
-            // 空列表: data.length === 0
-            whenEmpty() {
-                return !this.data.length;
+                if (overflowY === 'scroll' || overflowY === 'auto') {
+                    return currentNode;
+                }
+                currentNode = currentNode.parentNode;
             }
+            return window;
         },
-        methods: {
-            fetch: function() {
-                bus.$emit('list.paging');
-            },
-            clickProduct(item, index) {
-                this.$emit('click-product', item, index);
-            }
+        throttle(fn, delay) {
+            let timer;
+
+            return () => {
+                if (timer) {
+                    clearTimeout(timer);
+                    timer = null;
+                }
+                this.hrefClass = {
+                    'no-link': true
+                };
+
+                timer = setTimeout(() => {
+                    fn();
+                }, delay);
+            };
         }
-    };
+    }
+};
 
 </script>
 <style>
-    @import "../../../scss/common/_color.css";
-
-    .cardlist {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .cardlist--loading {
-        font-size: 32px;
-        text-align: center;
-        padding: 16px 0;
-    }
-
-    .card-large {
-        background-color: #fff;
-
-        .card {
-            float: left;
-            width: 330px;
-            margin: 0 30px;
-
-            &:nth-child(2n) {
-                margin: 0;
-            }
-        }
-
-        .card-pic {
-            width: 330px;
-            height: 440px;
-
-            a,
-            img {
-                display: block;
-                width: 100%;
-                height: 100%;
-            }
+@import "../../../scss/common/_color.css";
+
+.cardlist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.cardlist--loading {
+    font-size: 32px;
+    text-align: center;
+    padding: 16px 0;
+}
+
+.card-large {
+    background-color: #fff;
+
+    .card {
+        float: left;
+        width: 330px;
+        margin: 0 30px;
+
+        &:nth-child(2n) {
+            margin: 0;
         }
+    }
 
-        .card-bd {
-            min-height: 180px;
-            padding-top: 40px;
-            font-size: 0;
-            font-family: "BrownStd", "PingFang SC", Helvetica, Roboto, "Heiti SC", "\9ED1\4F53", Arial;
-        }
+    .card-pic {
+        width: 330px;
+        height: 440px;
 
-        .card-label {
-            margin: 0 0 30px;
-            font-size: 24px;
-            line-height: 1.4;
-            font-weight: normal;
+        a,
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
         }
+    }
 
-        .card-label-desc {
-            margin: 0 0 14px;
-            font-size: 20px;
-            line-height: 1.4;
-            height: 67.1999999999px;
-            font-weight: normal;
-
-            a {
-                color: #888;
-            }
-        }
+    .card-bd {
+        min-height: 180px;
+        padding-top: 40px;
+        font-size: 0;
+        font-family: "BrownStd", "PingFang SC", Helvetica, Roboto, "Heiti SC", "\9ED1\4F53", Arial;
     }
 
-    .good-price {
-        color: #b0b0b0;
-        margin-right: 14px;
+    .card-label {
+        margin: 0 0 30px;
         font-size: 24px;
+        line-height: 1.4;
+        font-weight: normal;
+    }
 
-        &:last-of-type {
-            margin-right: 0;
-        }
+    .card-label-desc {
+        margin: 0 0 14px;
+        font-size: 20px;
+        line-height: 1.4;
+        height: 67.1999999999px;
+        font-weight: normal;
 
-        &.old-price {
-            font-size: 18px;
-            color: #b0b0b0;
-            text-decoration: line-through;
+        a {
+            color: #888;
         }
+    }
+}
 
-        &.sale-price {
-            color: #000;
-        }
+.good-price {
+    color: #b0b0b0;
+    margin-right: 14px;
+    font-size: 24px;
+
+    &:last-of-type {
+        margin-right: 0;
     }
 
-    .empty-tip {
-        margin-top: 200px;
+    &.old-price {
+        font-size: 18px;
         color: #b0b0b0;
-        text-align: center;
-
-        .icon-search {
-            display: inline-block;
-            font-size: 200px;
-            margin-bottom: 56px;
-        }
+        text-decoration: line-through;
     }
 
-    .empty-tip-cn {
-        font-size: 34px;
-        margin-bottom: 30px;
+    &.sale-price {
+        color: #000;
     }
+}
 
-    .empty-tip-en {
-        font-size: 20px;
+.empty-tip {
+    margin-top: 200px;
+    color: #b0b0b0;
+    text-align: center;
+
+    .icon-search {
+        display: inline-block;
+        font-size: 200px;
+        margin-bottom: 56px;
     }
+}
+
+.empty-tip-cn {
+    font-size: 34px;
+    margin-bottom: 30px;
+}
 
+.empty-tip-en {
+    font-size: 20px;
+}
 </style>