NCJOAQ/DogMovies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

存档

Browse Source
This commit is contained in:
NCJOAQ
2025-11-06 10:15:38 +08:00
parent b8a9739e22
commit e9bf78f533
7 changed files with 43 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="app" style="overflow: hidden;"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

18
src/components/son.vue
View File

@@ -1,18 +0,0 @@
<template>
<div>
<h1>123</h1>
<h2>这是一个子组件{{ a }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
a: 114514
}
}
}
</script>
<style scoped>
</style>

41
src/pages/home/components/MyMain.vue
View File

@@ -11,7 +11,6 @@ import BScroll from 'better-scroll'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import MostPopular from "@/pages/home/components/MyMostPopular.vue" import MostPopular from "@/pages/home/components/MyMostPopular.vue"
import MovieList from "@/pages/home/components/MyMovieList.vue" import MovieList from "@/pages/home/components/MyMovieList.vue"
import request from '@/utils'
export default { export default {
components: { components: {
MostPopular, MostPopular,
@@ -19,20 +18,24 @@ export default {
}, },
data() { data() {
return { return {
scroll: null scroll: null,
ids: [],
total: Infinity,
startIndex: 0,
more: []
} }
},
async mounted() {
}, },
methods: { methods: {
async initsoc() { async initsoc(data) {
this.startIndex = data.data.length;
await nextTick(); await nextTick();
const el = this.$refs.main;
const box = this.$refs.box; const box = this.$refs.box;
console.log(`滚动父元素高度：${el.offsetHeight}`) const el = this.$refs.main;
console.log(`滚动子元素高度：${box.offsetHeight}`) // console.log(`滚动父元素高度：${el.offsetHeight}`)
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, { let bs = new BScroll(el, {
// ... // ...
pullUpLoad: true, pullUpLoad: true,
@@ -40,6 +43,21 @@ export default {
startY: 0, startY: 0,
scrollY: true 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", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
ids: ids
})
})
this.more = data.data
bs.finishPullUp()
})
} }
} }
} }
@@ -62,4 +80,5 @@ export default {
flex-direction: column; flex-direction: column;
} }
} }
</style> </style>

3
src/pages/home/components/MyMostPopular.vue
View File

@@ -25,8 +25,7 @@
<script> <script>
import BScroll from 'better-scroll' import BScroll from 'better-scroll'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import request from '@/utils'; import {request} from "@/utils"
import { watch } from 'less';
export default { export default {
data() { data() {
return { return {

16
src/pages/home/components/MyMovieList.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="movielist"> <div class="movielist">
<div class="movie" v-for="movie in data" :key="movie.id"> <div class="movie" v-for="movie in checkdata" :key="movie.id">
<div class="img"> <div class="img">
<img :src="movie.img" alt=""> <img :src="movie.img" alt="">
</div> </div>
@@ -14,7 +14,8 @@
<p v-if="movie.globalReleased">{{ movie.showInfo }}</p> <p v-if="movie.globalReleased">{{ movie.showInfo }}</p>
</div> </div>
<div class="btn-box"> <div class="btn-box">
<div class="btn" :style="{ backgroundColor: movie.showStateButton.color }">{{ movie.showStateButton.content }} <div class="btn" :style="{ backgroundColor: movie.showStateButton?.color }">{{ movie.showStateButton?.content
}}
</div> </div>
</div> </div>
</div> </div>
@@ -22,7 +23,7 @@
</div> </div>
</template> </template>
<script> <script>
import request from '@/utils'; import { request } from "@/utils"
import { nextTick } from 'vue'; import { nextTick } from 'vue';
export default { export default {
emits: ["soc"], emits: ["soc"],
@@ -33,18 +34,17 @@ export default {
}, },
async mounted() { async mounted() {
let data = await request("http://101.35.148.193:3000/api/movies/list"); let data = await request("http://101.35.148.193:3000/api/movies/list");
console.log(data)
if (data.success) { if (data.success) {
this.data = data.data; this.data = data;
} else { } else {
this.data = undefined; this.data = undefined;
} }
await nextTick(); await nextTick();
this.$emit("soc"); this.$emit("soc", this.data)
}, },
computed: { computed: {
checkdata() { checkdata() {
if (!this.data || !this.data.length) { if (!this.data.data || !this.data.data.length) {
return [ return [
{ nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true }, { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true },
{ nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true }, { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true },
@@ -52,7 +52,7 @@ export default {
{ nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: false } { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: false }
]; ];
} }
return this.data; return this.data.data;
} }
} }
}; };

28
src/pages/home/index.vue
View File

@@ -9,39 +9,15 @@
import Headera from "@/pages/home/components/MyHeader.vue"; import Headera from "@/pages/home/components/MyHeader.vue";
import Main from "@/pages/home/components/MyMain.vue"; import Main from "@/pages/home/components/MyMain.vue";
import Footer from "@/pages/home/components/MyFooter.vue"; import Footer from "@/pages/home/components/MyFooter.vue";
import request from "@/utils";
import { computed } from "vue";
export default { export default {
data() { data() {
return { rated: {}, movies: {} }; return {}
},
mounted() {
request("http://101.35.148.193:3000/api/rated/list").then((data) => {
if (data.success) {
this.rated = data.data;
} else {
this.rated = undefined;
}
});
request("http://101.35.148.193:3000/api/movies/list").then((data) => {
if (data.success) {
this.movies = data.data;
} else {
this.rated = undefined;
}
});
}, },
components: { components: {
Headera, Headera,
Main, Main,
Footer, Footer,
}, }
provide() {
return {
mostpopular: computed(() => this.rated),
movieList: computed(() => this.movies),
};
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

3
src/utils.js
View File

@@ -1,4 +1,3 @@
function request(url) { export function request(url) {
return fetch(url).then((res) => res.json()); return fetch(url).then((res) => res.json());
} }
export default request;