基本实现，有bug

src/assets/css/var.less

@@ -16,3 +16,4 @@
 .font-color(@color) when (@color = white),(@color = #fff),(@color = #ffffff) {
   color: black;
 }
+*{user-select: none;}

src/pages/home/components/MyMain.vue

@@ -2,7 +2,7 @@
   <div class="main" ref="main">
     <div class="box" ref="box">
       <Most-Popular />
-      <Movie-List @soc="initsoc" />
+      <Movie-List @soc="initsoc" :more="more" />
     </div>
   </div>
 </template>
@@ -29,11 +29,7 @@ export default {
     async initsoc(data) {
       this.startIndex = data.data.length;
       await nextTick();
-      const box = this.$refs.box;
       const el = this.$refs.main;
-      // console.log(`滚动父元素高度：${el.offsetHeight}`)
-      // console.log(`滚动子元素高度：${box.offsetHeight}`)
-      // console.log(el.offsetHeight)
       this.total = data.total;
       this.ids = data.ids;
       let bs = new BScroll(el, {
@@ -43,19 +39,21 @@ export default {
         startY: 0,
         scrollY: true
       })
-      bs.on("pullingUp", () => {
-        const ids = this.ids.slice(this.startIndex, this.startIndex + length)
-        // console.log(this.ids, ids)
-        let data = fetch("http://101.35.148.193:3000/api/movies/more", {
+      bs.on("pullingUp", async () => {
+        const ids = this.ids.slice(this.startIndex, this.startIndex + 10)
+        if (this.startIndex == this.total) { return }
+        let data = await fetch("http://101.35.148.193:3000/api/movies/more", {
           method: "POST",
           headers: {
             "Content-Type": "application/json"
           },
           body: JSON.stringify({
-            ids: ids
+            ids: ids.join(",")
           })
-        })
-        this.more = data.data
+        }).then(res => res.json())
+        this.more = [...this.more, ...data.data]
+        this.startIndex += data.data.length
+        bs.refresh()
         bs.finishPullUp()
       })
     }
@@ -81,4 +79,3 @@ export default {
   }
 }
 </style>
-

src/pages/home/components/MyMovieList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="movielist">
-    <div class="movie" v-for="movie in checkdata" :key="movie.id">
+    <div class="movie" v-for="movie in movie" :key="movie.id">
       <div class="img">
         <img :src="movie.img" alt="">
       </div>
@@ -14,7 +14,7 @@
           <p v-if="movie.globalReleased">{{ movie.showInfo }}</p>
         </div>
         <div class="btn-box">
-          <div class="btn" :style="{ backgroundColor: movie.showStateButton?.color }">{{ movie.showStateButton?.content
+          <div class="btn" :style="{ backgroundColor: movie.showStateButton?'movie.showStateButton?.color':'white' }">{{ movie.showStateButton?.content
           }}
           </div>
         </div>
@@ -27,6 +27,7 @@ import { request } from "@/utils"
 import { nextTick } from 'vue';
 export default {
   emits: ["soc"],
+  props: { more: Array },
   data() {
     return {
       data: []
@@ -34,6 +35,7 @@ export default {
   },
   async mounted() {
     let data = await request("http://101.35.148.193:3000/api/movies/list");
+    console.log(this.more)
     if (data.success) {
       this.data = data;
     } else {
@@ -53,6 +55,9 @@ export default {
         ];
       }
       return this.data.data;
+    },
+    movie() {
+      return [...this.checkdata, ...this.more]
     }
   }
 };