优化slide

src/pages/test/TestSlide.vue

@@ -1,10 +1,33 @@
 <template>
   <div id="TestSlide">
+    <SlideRowList
+        v-if="false"
+        name="baseSlide"
+        v-model:active-index="baseActiveIndex">
+      <SlideItem>
+        <SlideRowList
+            style="height: calc(100% - 5rem);"
+            v-model:active-index="activeIndex">
+          <SlideItem>
+            <div id="TestSlide1"></div>
+          </SlideItem>
+          <SlideItem>
+            <div id="TestSlide2"></div>
+          </SlideItem>
+        </SlideRowList>
+        <Footer v-bind:init-tab="1"/>
+      </SlideItem>
+      <SlideItem>
+        <div id="TestSlide3"></div>
+      </SlideItem>
+    </SlideRowList>
+    <div id="TestSlide1" style="height: calc(100% - 5rem);"></div>
   </div>
 </template>
 <script lang="jsx">
 import Slide from "./slide";
 import Video from "../../components/Video";
+import resource from "../../assets/data/resource.js";
 
 export default {
   name: "TestSlide",
@@ -15,8 +38,10 @@ export default {
   data() {
     return {
       totalSize: 52,
-      pageSize: 10,
+      pageSize: 30,
       pageNo: 0,
+      baseActiveIndex: 0,
+      activeIndex: 0,
     }
   },
   computed: {},
@@ -24,7 +49,11 @@ export default {
   created() {
   },
   mounted() {
-    let slide = new Slide('#TestSlide', {
+    let list = resource.videos
+    list = list.concat(resource.videos)
+    list.splice(24, 6)
+    console.log(list.length)
+    let slide = new Slide('#TestSlide1', {
       render: (item, itemIndex, play) => {
         return (
             <Video
@@ -39,25 +68,39 @@ export default {
             />
         )
       },
+      // list,
+      // index: 10,
       request: this.$api.videos.recommended
     })
+    // let slide2 = new Slide('#TestSlide2', {
+    //   render: (item, itemIndex, play) => {
+    //     return (
+    //         <Video
+    //             isPlay={play}
+    //             video={item}
+    //             index={itemIndex}
+    //             onShowComments={e => this.isCommenting = true}
+    //             onShowShare={e => this.isSharing = true}
+    //             onGoUserInfo={e => this.baseActiveIndex = 1}
+    //             onGoMusic={e => this.$nav('/home/music')}
+    //             v-model={[this.videos[itemIndex], 'video']}
+    //         />
+    //     )
+    //   },
+    //   request: this.$api.videos.recommended
+    // })
   },
   methods: {
     async getData() {
-      this.loading = true
       let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
       console.log(res)
-      this.loading = false
-      if (res.code === this.SUCCESS) {
-        this.totalSize = res.data.total
-        this.videos = this.videos.concat(res.data.list)
-        // this.videos = this.$clone(this.localVideos)
-      } else {
-        this.pageNo--
-      }
     },
   }
 }
+
+if (import.meta.hot) {
+
+}
 </script>
 <style>
 

src/pages/test/slide.js

@@ -2,17 +2,17 @@ import Dom from "../../utils/dom";
 import * as Vue from "vue";
 
 export default class Slide {
-  constructor(id, config) {
+  constructor(id, config = {index: 0}) {
-    this.wrapper = this.create('<div class="slide-wrapper"></div>')
     this.slideList = this.create('<div class="slide-list"></div>')
     this.slideList.addEventListener('touchstart', this.touchstart.bind(this))
     this.slideList.addEventListener('touchmove', this.touchmove.bind(this))
     this.slideList.addEventListener('touchend', this.touchend.bind(this))
-    this.wrapper.appendChild(this.slideList)
+
-    new Dom(id).append(new Dom(this.wrapper))
+    let container = new Dom(id)
-    // let container = document.querySelector(id)
+    // container.css('height','100%')
-    // console.log(container)
+    container.css('width', '100%')
-    // container.appendChild(this.wrapper)
+    container.css('overflow', 'hidden')
+    container.append(new Dom(this.slideList))
     this.total = 0
     this.pageSize = 10
     this.pageNo = 0
@@ -21,7 +21,7 @@ export default class Slide {
     this.loading = false
 
     this.judgeValue = 0
-    this.index = 0
+    this.index = config.index || 0
 
     this.startTime = 0
 
@@ -32,39 +32,31 @@ export default class Slide {
     this.virtualTotal = 5
 
 
-    this.height = 812
+    this.height = parseFloat(container.css('height'))
     this.isDrawDown = true
     this.config = config
     this.appInsMap = new Map()
     this.getData(this.pageNo)
   }
 
-
   async getData(pageNo, init = true) {
-    // if (this.config.request) {
+    if (this.config.list && this.config.list.length) {
-    //   let res = await this.config.request({pageNo: this.pageNo, pageSize: this.pageSize})
+      if (init) {
-    //   if (res.code === 200) {
+        for (let i = 0; i < this.config.list.length / this.virtualTotal; i++) {
-    //     this.total = res.data.total
+          this.listMap.set(i, this.config.list.slice(i * this.virtualTotal, (i + 1) * this.virtualTotal))
-    //
+        }
-    //     res.data.list.map((v, i) => {
+        this.init()
-    //       let el = this.getInsEl(v, i, false)
+      }
-    //       let item = this.create('<div class="slide-item"></div>')
+    } else {
-    //       item.appendChild(el)
+      this.getRecommend(pageNo).then(r => {
-    //       this.slideList.appendChild(item)
-    //     })
-    //   }
-    // }
-    this.getRecommend(pageNo).then(
-      r => {
         init && this.init()
+      })
     }
-    )
   }
 
   async getRecommend(pageNo) {
-    if (pageNo === 1) return
+    // if (pageNo === 1) return
     if (this.config.request) {
-
       if (this.listMap.has(pageNo)) return
       this.loading = true
       let res = await this.config.request({pageNo, pageSize: this.pageSize})
@@ -72,7 +64,7 @@ export default class Slide {
       if (res.code === 200) {
         this.total = res.data.total
         this.pageNo = pageNo
-        console.log('请求数据', res.data.list)
+        // console.log('请求数据', res.data.list)
         this.listMap.set(pageNo, res.data.list)
         // this.list = this.list.concat(res.data.list)
       }
@@ -81,7 +73,7 @@ export default class Slide {
 
   init() {
     this.getList().slice(this.index, this.index + this.virtualTotal).map((v, i) => {
-      let el = this.getInsEl(v, i, false)
+      let el = this.getInsEl(v, this.index + i, false)
       this.slideList.appendChild(el)
     })
     this.setActive()
@@ -130,19 +122,14 @@ export default class Slide {
 
     if (this.isDrawDown) {
       if (this.index === this.getList().length - 1) {
-        this.css(this.slideList, 'transform', `translate3d(0px, ${
+        this.css(this.slideList, 'transform', `translate3d(0px, ${this.getHeight() + (Math.abs(this.moveYDistance) > this.height / 5 ? -this.height / 5 : this.moveYDistance)}px, 0px)`)
-          this.getHeight() + (Math.abs(this.moveYDistance) > this.height / 5 ? -this.height / 5 : this.moveYDistance)
-        }px, 0px)`)
         return
       }
     } else {
       if (this.index === 0) return
     }
 
-    this.css(this.slideList, 'transform', `translate3d(0px, ${
+    this.css(this.slideList, 'transform', `translate3d(0px, ${this.getHeight() + this.moveYDistance + (this.isDrawDown ? this.judgeValue : -this.judgeValue)}px, 0px)`)
-      this.getHeight() + this.moveYDistance +
-      (this.isDrawDown ? this.judgeValue : -this.judgeValue)
-    }px, 0px)`)
   }
 
   touchend() {
@@ -154,7 +141,7 @@ export default class Slide {
       }
     }
 
-    let canSlide = this.height / 8 < Math.abs(this.moveYDistance);
+    let canSlide = this.height / 8 < Math.abs(this.moveYDistance) && Math.abs(this.moveYDistance) > 40;
     if (Date.now() - this.startTime < 40) canSlide = false
 
     if (canSlide) {