优化slide

src/App.vue

@@ -37,7 +37,9 @@ export default {
       this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
 
       //footer下面的5个按钮，对跳不要用动画
-      let noAnimation = ['/', '/home', '/me', '/attention', '/message', '/publish', '/home/live']
+      let noAnimation = ['/', '/home', '/me', '/attention', '/message', '/publish', '/home/live',
+      'slide'
+      ]
       if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
         return this.transitionName = ''
       }
@@ -48,7 +50,7 @@ export default {
     },
   },
   mounted() {
-    window.onresize=()=>{
+    window.onresize = () => {
       location.reload()
     }
     // this.$store.dispatch('getFriends')

src/pages/slide/slide-horizontal.vue

@@ -0,0 +1,110 @@
+<script lang="jsx">
+export default {
+  data() {
+    return {
+      wrapper: null,
+      total: 0,
+      index: 0,
+      wrapperWidth: 0,
+      wrapperHeight: 0,
+      moveX: 0,
+      moveY: 0,
+      startX: 0,
+      startY: 0,
+      needCheck: true,
+      next: false,
+      judgeValue: 20
+    }
+  },
+  mounted() {
+    this.wrapper = this.$refs.wrapper
+    this.total = this.wrapper.children.length
+    this.wrapperWidth = this.$getCss(this.wrapper, 'width')
+    this.wrapperHeight = this.$getCss(this.wrapper, 'height')
+
+  },
+  methods: {
+    touchStart(e) {
+      this.$setCss(this.wrapper, 'transition-duration', `0ms`)
+      this.startX = e.touches[0].pageX
+      this.startY = e.touches[0].pageY
+    },
+    touchMove(e) {
+      this.moveX = e.touches[0].pageX - this.startX
+      this.moveY = e.touches[0].pageY - this.startY
+
+      let isRight = this.moveX < 0
+      if ((this.index === 0 && !isRight) || (this.index === this.total - 1 && isRight)) return
+      this.$stopPropagation(e)
+
+      this.checkDirection(e)
+
+      if (this.next) {
+        this.$setCss(this.wrapper, 'transform',
+            `translate3d(${this.getDistance()
+            + this.moveX
+            + (isRight ? this.judgeValue : -this.judgeValue)
+            }px, 0, 0)`)
+      }
+    },
+    checkDirection(e) {
+      if (this.needCheck) {
+        // this.$stopPropagation(e)
+      } else {
+        return
+      }
+      if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) {
+        let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10)
+        if (angle > 1) {
+          this.next = true
+          // console.log('横划')
+        } else {
+          // console.log('竖划')
+        }
+        // console.log(angle)
+        return this.needCheck = false
+      }
+      return this.needCheck = true
+    },
+    touchEnd(e) {
+      let isRight = this.moveX < 0
+      let next = true
+      if ((this.index === 0 && !isRight) || (this.index === this.total - 1 && isRight)) next = false
+
+      if (Math.abs(this.moveX) > (this.wrapperWidth / 4) && next) {
+        if (isRight) {
+          this.index++
+        } else {
+          this.index--
+        }
+      }
+      this.$setCss(this.wrapper, 'transition-duration', `300ms`)
+      this.$setCss(this.wrapper, 'transform',
+          `translate3d(${this.getDistance()}px, 0, 0)`)
+      this.reset()
+    },
+    reset() {
+      this.next = false
+      this.needCheck = true
+    },
+    getDistance() {
+      return -this.index * this.wrapperWidth
+    },
+  },
+
+  render(createElement, context) {
+    return (
+        <div className="slide-column">
+          <div className="column-wrapper"
+               ref="wrapper"
+               ontouchstart={this.touchStart.bind(this)}
+               ontouchmove={this.touchMove.bind(this)}
+               ontouchend={this.touchEnd.bind(this)}
+          >
+            {this.$slots.default()}
+          </div>
+        </div>
+    )
+  }
+}
+</script>

src/pages/slide/slide-vertical.vue

@@ -0,0 +1,111 @@
+<script lang="jsx">
+export default {
+  data() {
+    return {
+      wrapper: null,
+      total: 0,
+      index: 0,
+      wrapperWidth: 0,
+      wrapperHeight: 0,
+      moveX: 0,
+      moveY: 0,
+      startX: 0,
+      startY: 0,
+      needCheck: true,
+      next: false,
+      judgeValue: 20
+    }
+  },
+  mounted() {
+    this.wrapper = this.$refs.wrapper
+    this.total = this.wrapper.children.length
+    this.wrapperWidth = this.$getCss(this.wrapper, 'width')
+    this.wrapperHeight = this.$getCss(this.wrapper, 'height')
+  },
+  methods: {
+    touchStart(e) {
+      this.$setCss(this.wrapper, 'transition-duration', `0ms`)
+      this.startX = e.touches[0].pageX
+      this.startY = e.touches[0].pageY
+    },
+    touchMove(e) {
+      this.moveX = e.touches[0].pageX - this.startX
+      this.moveY = e.touches[0].pageY - this.startY
+
+      let isDown = this.moveY < 0
+      if ((this.index === 0 && !isDown) || (this.index === this.total - 1 && isDown)) return
+
+      this.checkDirection(e)
+
+      if (this.next) {
+        this.$stopPropagation(e)
+        this.$setCss(this.wrapper, 'transform',
+            `translate3d(0,${this.getDistance()
+            + this.moveY
+            + (isDown ? this.judgeValue : -this.judgeValue)
+            }px, 0)`)
+      }
+    },
+    checkDirection(e) {
+      if (this.needCheck) {
+        // this.$stopPropagation(e)
+      } else {
+        return
+      }
+      if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) {
+        let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10)
+        if (angle > 1) {
+          // console.log('横划')
+        } else {
+          this.next = true
+          // console.log('竖划')
+        }
+        // console.log(angle)
+        return this.needCheck = false
+      }
+      return this.needCheck = true
+    },
+    touchEnd(e) {
+      let isDown = this.moveY < 0
+      let next = true
+      if ((this.index === 0 && !isDown) || (this.index === this.total - 1 && isDown)) next = false
+
+      if (Math.abs(this.moveY) > (this.wrapperHeight / 4) && next) {
+        if (isDown) {
+          this.index++
+        } else {
+          this.index--
+        }
+      }
+      this.$setCss(this.wrapper, 'transition-duration', `300ms`)
+
+      this.$setCss(this.wrapper, 'transform',
+          `translate3d(0,${this.getDistance()}px, 0)`)
+      this.reset()
+    },
+    reset() {
+      this.next = false
+      this.needCheck = true
+    },
+    getDistance() {
+      return -this.index * this.wrapperHeight
+    },
+  },
+
+  render(createElement, context) {
+    return (
+        <div className="slide-row">
+          <div className="column-wrapper"
+               style="flex-direction: column;"
+               ref="wrapper"
+               ontouchstart={this.touchStart.bind(this)}
+               ontouchmove={this.touchMove.bind(this)}
+               ontouchend={this.touchEnd.bind(this)}
+          >
+            {this.$slots.default()}
+          </div>
+        </div>
+    )
+  }
+}
+</script>

src/pages/slide/slide.vue

@@ -1,26 +1,48 @@
 <template>
-  <div id="TestSlide">
-    <div class="column">
-      <div class="column-wrapper">
-        <div class="column">
-          <div class="column-wrapper">
-            <div class="row"></div>
-            <div class="row"></div>
-            <div class="row"></div>
+  <div class="Slide">
+    <slide-horizontal>
+      <div class="item">
+        <slide-horizontal>
+          <div class="item">
+            <SlideVertical>
+              <div class="item">r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1</div>
+              <div class="item">r2222222222222222222222222222222222222222222222222222222</div>
+              <div class="item">r333333333333333333333333333333333333333333333333333333</div>
+            </SlideVertical>
           </div>
-        </div>
-        <div class="row">
-
-        </div>
+          <div class="item">
+            <SlideVertical>
+              <div class="item">r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1</div>
+              <div class="item">r2222222222222222222222222222222222222222222222222222222</div>
+              <div class="item">r333333333333333333333333333333333333333333333333333333</div>
+            </SlideVertical>
+          </div>
+          <div class="item">
+            <SlideVertical>
+              <div class="item">r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1</div>
+              <div class="item">r2222222222222222222222222222222222222222222222222222222</div>
+              <div class="item">r333333333333333333333333333333333333333333333333333333</div>
+            </SlideVertical>
+          </div>
+        </slide-horizontal>
       </div>
-    </div>
-
+      <div class="item">
+        <p v-for="i in 100">2</p>
+      </div>
+    </slide-horizontal>
   </div>
 </template>
 
 <script>
+import SlideHorizontal from './slide-horizontal'
+import SlideVertical from './slide-vertical'
+
 export default {
   name: "slide",
+  components: {
+    SlideHorizontal,
+    SlideVertical
+  },
   data() {
     return {}
   },
@@ -32,6 +54,32 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
+.Slide {
+  height: 90vh;
+  width: 100vw;
+  color: white;
+}
+
+.slide-column, .slide-row {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  .column-wrapper {
+    height: 100%;
+    width: 100%;
+    display: flex;
 
+    //transform: translateX(1rem);
+
+  }
+
+  .item {
+    width: 100%;
+    min-width: 100%;
+    height: 100%;
+    min-height: 100%;
+  }
+}
 </style>