From 169510da1d597e40dd9000382fe9918e7ce40751 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 13 Aug 2019 02:06:38 +0800
Subject: [PATCH] BaseSlide

---
 src/components/BaseHeader.vue    |   6 +-
 src/components/BaseSlideItem.vue |  22 ++++
 src/components/BaseSlideList.vue | 201 +++++++++++++++++++++++++++++++
 src/main.js                      |   6 +-
 src/pages/me/MyCollect.vue       | 133 +++++++++++++++++++-
 5 files changed, 357 insertions(+), 11 deletions(-)
 create mode 100644 src/components/BaseSlideItem.vue
 create mode 100644 src/components/BaseSlideList.vue

diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index 15efd05..50b6a8c 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -8,7 +8,7 @@
                   p-id="16293" fill="#8a8a8a"></path>
         </svg>
         <span class="fb c-white f20">{{title}}</span>
-        <slot></slot>
+        <slot><span></span></slot>
     </div>
 </template>
 <script>
@@ -20,10 +20,6 @@
                 type: String,
                 default: '我的名片'
             },
-            isShowRightBtn: {
-                type: Boolean,
-                default: true
-            },
             isShowLeftBtn: {
                 type: Boolean,
                 default: true
diff --git a/src/components/BaseSlideItem.vue b/src/components/BaseSlideItem.vue
new file mode 100644
index 0000000..d9be9dd
--- /dev/null
+++ b/src/components/BaseSlideItem.vue
@@ -0,0 +1,22 @@
+<template>
+    <div id="base-slide-item" ref="slideItem">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BaseSlideItem"
+    }
+</script>
+
+<style scoped lang="scss">
+    #base-slide-item {
+        width: 100%;
+        height: 100%;
+        /*flex: 1;*/
+        /*flex-shrink: 1;*/
+        overflow-y: scroll;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/BaseSlideList.vue b/src/components/BaseSlideList.vue
new file mode 100644
index 0000000..d25e26c
--- /dev/null
+++ b/src/components/BaseSlideList.vue
@@ -0,0 +1,201 @@
+<template>
+    <div id="base-slide-wrapper" ref="slideWrapper">
+        <div id="base-slide-list" ref="slideList"
+             @touchstart="touchStart($event)"
+             @touchmove="touchMove($event)"
+             @touchend="touchEnd($event)">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BaseSlideList",
+        created() {
+            // console.log('created',this.$refs)
+        },
+        data() {
+            return {
+                wrapperWidth: 0,
+
+                startLocationX: 0,
+                startLocationY: 0,
+
+                lastLocationX: 0,
+                lastLocationY: 0,
+
+                moveXDistance: 0,
+                moveYDistance: 0,
+
+                judgeValue: 20,
+                startTime: 0,
+
+                currentSlideItemIndex: 0,
+                isDrawRight: 0,
+                isCanRightWiping: false,
+                isCanDownWiping: false,
+                isNeedCheck: true,
+
+                slideList: null,
+                slideItems: null,
+            }
+        },
+        mounted() {
+            this.slideList = this.$refs.slideList
+            this.slideItems = this.slideList.children
+            this.wrapperWidth = this.$getCss(this.slideList, 'width')
+            console.log(this.wrapperWidth)
+            this.slideList.style.width = this.slideItems.length * this.wrapperWidth + 'px'
+        },
+        methods: {
+            touchStart(e) {
+                this.slideList.style.transition = 'none'
+                // indicator.style.transition = 'none'
+
+                this.startLocationX = e.touches[0].pageX
+                this.startLocationY = e.touches[0].pageY
+                // console.log(' this.startLocationX', this.startLocationX)
+                // console.log(' this.startLocationY', this.startLocationY)
+                this.startTime = Date.now()
+            },
+            touchMove(e) {
+                this.lastLocationX = e.touches[0].pageX
+                this.lastLocationY = e.touches[0].pageY
+                this.moveXDistance = this.lastLocationX - this.startLocationX
+                this.moveYDistance = this.lastLocationY - this.startLocationY
+
+                // console.log('moveXDistance', this.moveXDistance)
+                // console.log('moveYDistance', this.moveYDistance)
+
+                this.isDrawRight = this.moveXDistance < 0
+
+                // console.log(this.isDrawRight)
+
+                this.checkDirection()
+                if (this.isCanRightWiping) {
+                    //禁止在index=0页面的时候，向左划
+                    if (this.currentSlideItemIndex === 0 && !this.isDrawRight) {
+                        return
+                    }
+                    //禁止在最后页面的时候，向右划
+                    if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) {
+                        return
+                    }
+                    e.stopImmediatePropagation()
+                    e.stopPropagation()
+
+                    if (this.isDrawRight) {
+                        this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance + this.judgeValue + 'px'
+                    } else {
+                        this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance - this.judgeValue + 'px'
+                    }
+                }
+            },
+            touchEnd(e) {
+                if (this.currentSlideItemIndex === 0 && !this.isDrawRight) {
+                    return
+                }
+                //禁止在最后页面的时候，向右划
+                if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) {
+                    return
+                }
+
+                this.slideList.style.transition = 'all .3s'
+
+                let endTime = Date.now()
+                let gapTime = endTime - this.startTime
+
+                // 如果
+                if (Math.abs(this.moveXDistance) < 20) {
+                    gapTime = 1000
+                }
+                if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) {
+                    gapTime = 100
+                }
+
+                if (gapTime < 150) {
+                    if (this.isDrawRight) {
+                        this.currentSlideItemIndex += 1
+                    } else {
+                        this.currentSlideItemIndex -= 1
+                    }
+                    this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px'
+
+                } else {
+                    this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px'
+                }
+                this.resetConfig()
+            },
+            resetConfig() {
+                this.isCanDownWiping = false
+                this.isCanRightWiping = false
+                this.isNeedCheck = true
+                this.moveXDistance = 0
+                this.moveYDistance = 0
+            },
+            checkDirection() {
+                if (!this.isNeedCheck) {
+                    // console.log('不需要检测了')
+                    return
+                }
+                if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
+                    // console.log((Math.abs(this.moveXDistance) * 10))
+                    // console.log((Math.abs(this.moveYDistance) * 10))
+                    // console.log((Math.abs(this.moveYDistance)))
+                    //y移动距离为0 ，angle为Infinty
+                    if (Math.abs(this.moveYDistance) === 0) {
+                        //左右划
+                        this.isCanDownWiping = false
+                        this.isCanRightWiping = true
+                        this.isNeedCheck = false
+                        return;
+                    }
+                    //X 除以 Y
+                    let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
+                    // console.log('angle', angle);
+                    if (angle > 0.7 && angle < 1.3) {
+                        this.isNeedCheck = false
+                        return
+                    }
+
+                    // console.log('x------------', moveXDistance)
+                    // console.log('y------------', moveYDistance)
+                    // console.log('角度------------', angle)
+
+                    if (angle < 0.6) {
+                        //上下划
+                        this.isCanDownWiping = true
+                        this.isCanRightWiping = false
+                        this.isNeedCheck = false
+                        return
+                    }
+                    if (angle > 5) {
+                        //左右划
+                        this.isCanDownWiping = false
+                        this.isCanRightWiping = true
+                        this.isNeedCheck = false
+                        return
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    #base-slide-wrapper {
+        width: 100%;
+        overflow: hidden;
+
+        #base-slide-list {
+            display: flex;
+            left: 0;
+            /*transition: all 0.3s ease 0s;*/
+            height: 100%;
+            width: 100%;
+            position: relative;
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9c8c437..043537b 100755
--- a/src/main.js
+++ b/src/main.js
@@ -16,11 +16,15 @@ import MyCard from "./pages/me/MyCard"
 
 import BaseHeader from "./components/BaseHeader"
 import MyCollect from "./pages/me/MyCollect";
+import BaseSlideList from "./components/BaseSlideList";
+import BaseSlideItem from "./components/BaseSlideItem";
 
 Vue.config.productionTip = false
 
 Vue.component('icon', Icon)
 Vue.component('BaseHeader', BaseHeader)
+Vue.component('BaseSlideList', BaseSlideList)
+Vue.component('BaseSlideItem', BaseSlideItem)
 Vue.use(VueRouter)
 Vue.use(Vuex)
 
@@ -53,7 +57,7 @@ const store = new Vuex.Store({
 
 Vue.mixin({
     methods: {
-        getCss(curEle, attr) {
+        $getCss(curEle, attr) {
             let val = null, reg = null
             if ("getComputedStyle" in window) {
                 val = window.getComputedStyle(curEle, null)[attr]
diff --git a/src/pages/me/MyCollect.vue b/src/pages/me/MyCollect.vue
index efb459c..58bebc8 100644
--- a/src/pages/me/MyCollect.vue
+++ b/src/pages/me/MyCollect.vue
@@ -1,20 +1,143 @@
 <template>
     <div id="MyCollect">
-        <BaseHeader title="我的收藏" is-show-right-btn="false"></BaseHeader>
-
+        <BaseHeader title="我的收藏" ref="baseHeader"></BaseHeader>
+        <BaseSlideList :style="{height:slideListHeight+'px'}">
+            <BaseSlideItem>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+                <p>12</p>
+            </BaseSlideItem>
+            <BaseSlideItem>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+                <p>2</p>
+            </BaseSlideItem>
+            <BaseSlideItem>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+                <p>3</p>
+            </BaseSlideItem>
+            <BaseSlideItem>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+                <p>4</p>
+            </BaseSlideItem>
+        </BaseSlideList>
     </div>
 </template>
 
 <script>
     export default {
         name: "MyCollect",
-        date() {
-            return {}
+        data() {
+            return {
+                slideListHeight: 812
+            }
+        },
+        created(){
+            // console.log(this.slideListHeight)
+        },
+        mounted() {
+            let screenHeight = document.body.clientHeight
+            let baseHeader = this.$refs.baseHeader
+            this.slideListHeight = screenHeight - baseHeader.$el.clientHeight
         }
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
     #MyCollect {
         width: 100vw;
         height: 100%;