更多

 <template>
-    <resource class="no-padding-right">
-        <ul class="resource-tf-goods">
+    <resource class="no-padding-right product-list-more">
+        <ul class="resource-tf-goods"
+            @touchstart="touchStart"
+            @touchmove="touchMove"
+            @touchend="touchEnd"
+            ref="goodsList"
+            :style="moreSlider"
+            :class="{'less-slider': value.data.list.length <= 3}"
+        >
             <li class="product-item" v-for="(item, pi) in value.data.list" :key="pi">
                 <product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
                 <img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
@@ -10,6 +17,7 @@
                 </div>
             </li>
         </ul>
+        <div class="more" :class="{'show-more': value.data.list.length <= 3}" :style="moreMove" ref="more" v-show="value.data.url" @click="moreAction"></div>
     </resource>
 </template>
 
@@ -18,6 +26,16 @@ import Resource from './resource';
 
 export default {
     name: 'ResourceTfGoodsList',
+    data() {
+        return {
+            startX: 0,
+            endX: 0,
+            moveX: 0,
+            disX: 0,
+            moreSlider: '',
+            moreMove: ''
+        };
+    },
     props: {
         value: Object,
         lazy: Boolean,
@@ -25,6 +43,90 @@ export default {
     },
     computed: {
     },
+    methods: {
+        touchStart(ev) {
+            ev = ev || event;
+
+            // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
+            if (ev.touches.length === 1) {
+
+                // 记录开始位置
+                this.startX = ev.touches[0].clientX;
+            }
+        },
+        touchMove(ev) {
+            let wd = this.$refs.goodsList.scrollWidth - this.$refs.goodsList.offsetWidth;
+            let moreWd = this.$refs.more.offsetWidth;
+            let scrollLeft = this.$refs.goodsList.scrollLeft;
+
+            if (this.value.data.list.length <= 3 || !this.value.data.url) {
+                return;
+            }
+
+            if (ev.touches.length === 1 && scrollLeft >= wd) {
+
+                // 滑动时距离浏览器左侧实时距离
+                this.moveX = ev.touches[0].clientX;
+
+                // 起始位置减去 实时的滑动的距离，得到手指实时偏移距离
+                this.disX = this.startX - this.moveX;
+
+                // 如果是向右滑动或者不滑动，不改变滑块的位置
+                if (this.disX < 0 || this.disX === 0) {
+                    this.moreSlider = 'transform:translateX(0px)';
+                    this.moreMove = 'transform:translateX(' + moreWd + 'px)';
+
+                // 大于0，表示左滑了，此时滑块开始滑动
+                } else if (this.disX > 0) {
+
+                    // 具体滑动距离我取的是 手指偏移距离*5。
+                    this.moreSlider = 'transform:translateX(-' + this.disX * 5 + 'px)';
+                    this.moreMove = 'transform:translateX(' + moreWd - this.disX + 'px)';
+
+                    // 最大也只能等于按钮宽度
+                    if (this.disX * 5 >= moreWd) {
+                        this.moreSlider = 'transform:translateX(-' + moreWd + 'px)';
+                        this.moreMove = 'transform:translateX(0px)';
+                    }
+                }
+            } else {
+                this.moreSlider = 'transform:translateX(0px)';
+                this.moreMove = 'transform:translateX(' + moreWd + 'px)';
+            }
+        },
+        touchEnd(ev) {
+            let wd = this.$refs.goodsList.scrollWidth - this.$refs.goodsList.offsetWidth;
+            let moreWd = this.$refs.more.offsetWidth;
+            let scrollLeft = this.$refs.goodsList.scrollLeft;
+
+            if (this.value.data.list.length <= 3 || !this.value.data.url) {
+                return;
+            }
+
+            if (ev.changedTouches.length === 1 && scrollLeft >= wd) {
+                let endX = ev.changedTouches[0].clientX;
+
+                this.disX = this.startX - endX;
+
+                // 如果距离小于按钮一半,强行回到起点
+                if ((this.disX * 5) < (moreWd / 2)) {
+                    this.moreSlider = 'transform:translateX(0px)';
+                    this.moreMove = 'transform:translateX(' + moreWd + 'px)';
+                } else {
+
+                    // 大于一半 滑动到最大值
+                    location.href = this.value.data.url;
+                }
+            }
+        },
+        moreAction() {
+            if (this.value.data.list.length > 3) {
+                return;
+            }
+
+            location.href = this.value.data.url;
+        }
+    },
     components: {Resource}
 };
 </script>
@@ -36,6 +138,14 @@ export default {
     -webkit-overflow-scrolling: touch;
     white-space: nowrap;
     overflow-y: hidden;
+    display: inline-block;
+    transition: 0.5s;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 200;
+    background: #fff;
+    padding-left: 20px;
 
     li.product-item {
         position: relative;
@@ -65,7 +175,7 @@ export default {
             max-width: 188px;
             line-height: 1;
             margin-top: 24px;
-            font-family: HelveticaNeue , Tahoma, Arial, HiraginoSansGB-W3, "PingFang SC", "Heiti SC";
+            font-family: HelveticaNeue, Tahoma, Arial, HiraginoSansGB-W3, "PingFang SC", "Heiti SC";
 
             &.price {
                 font-size: 28px;
@@ -73,4 +183,42 @@ export default {
         }
     }
 }
+
+.product-list-more {
+    position: relative;
+    height: 318px;
+
+    .more {
+        width: 113px;
+        height: 250px;
+        background: url("~statics/img/channel/more@2x.png") no-repeat;
+        background-size: contain;
+        position: absolute;
+        right: 0;
+        top: 20px;
+        transform: translateX(113px);
+        transition: 0.5s;
+    }
+
+    .show-more {
+        width: 98px;
+        position: relative;
+        vertical-align: top;
+        display: inline-block;
+        top: 0;
+        right: 0;
+        transform: translateX(0);
+    }
+
+    .less-slider {
+        width: auto;
+        position: relative;
+        right: auto;
+        padding-left: 0;
+    }
+}
+
+.scroller-box {
+    overflow-x: hidden;
+}
 </style>