优化slide

src/pages/test/slide.js

@@ -4,21 +4,22 @@ import * as Vue from "vue";
 export default class Slide {
   constructor(id, config) {
     this.wrapper = this.create('<div class="slide-wrapper"></div>')
-    this.list = this.create('<div class="slide-list"></div>')
+    this.slideList = this.create('<div class="slide-list"></div>')
-    this.list.addEventListener('touchstart', this.touchstart.bind(this))
+    this.slideList.addEventListener('touchstart', this.touchstart.bind(this))
-    this.list.addEventListener('touchmove', this.touchmove.bind(this))
+    this.slideList.addEventListener('touchmove', this.touchmove.bind(this))
-    this.list.addEventListener('touchend', this.touchend.bind(this))
+    this.slideList.addEventListener('touchend', this.touchend.bind(this))
-    this.wrapper.appendChild(this.list)
+    this.wrapper.appendChild(this.slideList)
     new Dom(id).append(new Dom(this.wrapper))
     // let container = document.querySelector(id)
     // console.log(container)
     // container.appendChild(this.wrapper)
-    this.totalSize = 52
+    this.total = 0
     this.pageSize = 10
     this.pageNo = 0
+    this.list = []
 
     this.judgeValue = 0
-    this.currentIndex = 0
+    this.index = 0
 
     this.startTime = 0
 
@@ -26,6 +27,7 @@ export default class Slide {
     this.startLocationY = 0
     this.moveXDistance = 0
     this.moveYDistance = 0
+    this.virtualTotal = 5
 
 
     this.height = 812
@@ -46,19 +48,45 @@ export default class Slide {
   }
 
   async getData() {
+    // if (this.config.request) {
+    //   let res = await this.config.request({pageNo: this.pageNo, pageSize: this.pageSize})
+    //   if (res.code === 200) {
+    //     this.total = res.data.total
+    //
+    //     res.data.list.map((v, i) => {
+    //       let el = this.getInsEl(v, i, false)
+    //       let item = this.create('<div class="slide-item"></div>')
+    //       item.appendChild(el)
+    //       this.slideList.appendChild(item)
+    //     })
+    //   }
+    // }
+    this.getRecommend().then(
+      r => {
+        this.init()
+      }
+    )
+  }
+
+  async getRecommend() {
     if (this.config.request) {
       let res = await this.config.request({pageNo: this.pageNo, pageSize: this.pageSize})
       if (res.code === 200) {
-        res.data.list.map((v, i) => {
+        this.total = res.data.total
-          let el = this.getInsEl(v, i, false)
+        this.list = this.list.concat(res.data.list)
-          let item = this.create('<div class="slide-item"></div>')
-          item.appendChild(el)
-          this.list.appendChild(item)
-        })
       }
     }
   }
 
+  init() {
+    this.list.slice(this.index, this.index + this.virtualTotal).map((v, i) => {
+      let el = this.getInsEl(v, i, false)
+      let item = this.create('<div class="slide-item"></div>')
+      item.appendChild(el)
+      this.slideList.appendChild(item)
+    })
+  }
+
   getInsEl(item, index, play = false) {
     // console.log('index',index,play)
     let slideVNode = this.config.render(item, index, play)
@@ -75,11 +103,11 @@ export default class Slide {
   }
 
   touchstart(e) {
-    console.log('touchstart')
+    // console.log('touchstart')
     this.startLocationX = e.touches[0].pageX
     this.startLocationY = e.touches[0].pageY
     this.startTime = Date.now()
-    console.log('touchstart', this.startTime)
+    // console.log('touchstart', this.startTime)
 
     this.css(this.list, 'transition-duration', '0ms')
   }
@@ -91,6 +119,8 @@ export default class Slide {
     // console.log('touchmove', this.moveXDistance)
     // console.log('touchmove', this.moveYDistance)
 
+    this.isDrawDown = this.moveYDistance < 0
+
     this.css(this.list, 'transform', `translate3d(0px, ${
       this.getHeight() + this.moveYDistance +
       (this.isDrawDown ? this.judgeValue : -this.judgeValue)
@@ -98,42 +128,28 @@ export default class Slide {
   }
 
   getHeight() {
-    return -this.currentIndex * this.height
+    return -this.index * this.height
   }
 
   touchend() {
+    let canSlide = this.height / 8 < Math.abs(this.moveYDistance);
+    if (Date.now() - this.startTime < 40) canSlide = false
 
-    let endTime = Date.now()
+    if (canSlide) {
-    let gapTime = endTime - this.startTime
-
-    if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
-    if (Math.abs(this.moveYDistance) > (this.height / 3)) gapTime = 100
-
-    // console.log(gapTime)
-
-    this.currentIndex += 1
-
-    console.log('currentIndex', this.currentIndex)
-
-    this.css(this.list, 'transition-duration', '300ms')
-    this.css(this.list, 'transform', `translate3d(0px, ${
-      this.getHeight()
-    }px, 0px)`)
-
-    return
-    if (gapTime < 150) {
       if (this.isDrawDown) {
-        this.currentIndex += 1
+        if (this.index !== this.total) {
+          this.index += 1
+          if (this.list.length - this.index <= 3 && this.index < this.total - 3) {
+            this.getData()
+          }
+        }
       } else {
-        this.currentIndex -= 1
+        if (this.index !== 0) {
+          this.index -= 1
+        }
       }
-      console.log(1)
-      this.currentIndex += 1
-
-      this.css(this.list, 'transition-duration', '300ms')
-      this.css(this.list, 'transform', `translate3d(0px, ${
-        this.currentIndex * this.height
-      }px, 0px)`)
     }
+    this.css(this.list, 'transition-duration', '300ms')
+    this.css(this.list, 'transform', `translate3d(0px, ${this.getHeight()}px, 0px)`)
   }
 }