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-05 22:39:37 +08:00
parent 22917a6ff7
commit b8a9739e22
11 changed files with 220 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

1
package.json
View File

@@ -13,6 +13,7 @@
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"better-scroll": "^2.5.1",
"postcss-pxtorem": "^6.1.0",
"vue": "^3.5.22"
},

1
src/App.vue
View File

@@ -10,6 +10,5 @@ export default {
<template>
<home />
</template>
<style scoped>
</style>

18
src/components/son.vue Normal file
View File

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

4
src/pages/home/components/MyFooter.vue
View File

@@ -34,6 +34,10 @@ export default {
</script>
<style scoped lang="less">
footer {
position: fixed;
left: 0;
bottom: 0;
background-color: #fff;
color: @font-color2;
width: 100%;
height: 48px;

15
src/pages/home/components/MyHeader.vue
View File

@@ -4,13 +4,25 @@
<slot>未传入参数</slot>
<span class="iconfont icon-caidan menu"></span>
</h1>
<Nav />
</header>
</template>
<script>
import Nav from "@/pages/home/components/MyNav.vue";
export default {
components: {
Nav,
}
}
</script>
<style scoped lang="less">
header {
position: fixed;
left: 0;
top: 0;
background-color: #fff;
overflow: hidden;
z-index: 999;
h1 {
width: 375px;
font-size: @mfont;
@@ -22,7 +34,6 @@ header {
align-items: center;
position: relative;
}
.menu {
position: absolute;
right: 12px;

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

@@ -1,12 +1,17 @@
<template>
<main class="main">
<MostPopular />
<MovieList />
</main>
<div class="main" ref="main">
<div class="box" ref="box">
<Most-Popular />
<Movie-List @soc="initsoc" />
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import { nextTick } from 'vue'
import MostPopular from "@/pages/home/components/MyMostPopular.vue"
import MovieList from "@/pages/home/components/MyMovieList.vue"
import request from '@/utils'
export default {
components: {
MostPopular,
@@ -14,19 +19,47 @@ export default {
},
data() {
return {
scroll: null
}
},
async mounted() {
},
methods: {
async initsoc() {
await nextTick();
const el = this.$refs.main;
const box = this.$refs.box;
console.log(`滚动父元素高度：${el.offsetHeight}`)
console.log(`滚动子元素高度：${box.offsetHeight}`)
console.log(el.offsetHeight)
let bs = new BScroll(el, {
// ...
pullUpLoad: true,
startX: 0,
startY: 0,
scrollY: true
})
}
}
}
</script>
<style lang="less" scoped>
.main {
flex: 1;
overflow-y: auto;
overflow: hidden;
background-color: @background-color;
flex-grow: 1;
margin: 95px 0 0 0;
display: block;
// height: calc(100vh - 95px - 48px);
&::-webkit-scrollbar {
display: none;
}
>.box {
display: inline-flex;
flex-direction: column;
}
}
</style>

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

@@ -1,30 +1,36 @@
<template>
<div class="mostpopular">
<p class="title">最受好评电影</p>
<ul>
<li class="movie" v-for="movie in displayData" :key="movie.id || movie.nm">
<a href="#">
<div class="img">
<div class="mark">
<div class="score" v-if="movie.sc">观众评分&nbsp;&nbsp;{{ movie.sc }}</div>
<div class="score" v-else>
<template v-if="movie.wish">{{ movie.wish }}人想看</template>
<div class="wrap" ref="ul1">
<ul>
<li class="movie" v-for="movie in displayData" :key="movie.id || movie.nm">
<a href="#">
<div class="img">
<div class="mark">
<div class="score" v-if="movie.sc">观众评分&nbsp;&nbsp;{{ movie.sc }}</div>
<div class="score" v-else>
<template v-if="movie.wish">{{ movie.wish }}人想看</template>
</div>
</div>
<img :src="movie.img" alt="">
</div>
<img :src="movie.img" alt="">
</div>
<h5>{{ movie.nm }}</h5>
</a>
</li>
</ul>
<h5>{{ movie.nm }}</h5>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import { nextTick } from 'vue'
import request from '@/utils';
import { watch } from 'less';
export default {
inject: {
data: {
from: "mostpopular",
default: () => ({})
data() {
return {
data: {}
}
},
computed: {
@@ -39,6 +45,28 @@ export default {
}
return this.data;
}
},
async mounted() {
let data = await request("http://101.35.148.193:3000/api/rated/list")
if (data.success) {
this.data = data.data;
} else {
this.data = undefined;
}
await nextTick();
let el = this.$refs.ul1
console.log(el.offsetWidth)
new BScroll(el, {
// pullUpLoad: true,
// wheel: true,
// scrollbar: true,
startX: 0,
startY: 0,
scrollX: true
})
},
methods: {
}
}
</script>
@@ -47,81 +75,87 @@ export default {
padding: 12px 15px;
margin-bottom: 10px;
background-color: white !important;
width: 376px;
overflow: hidden;
>.title {
font-size: @sfont;
color: #333;
margin-bottom: 12px;
}
>ul {
display: flex;
flex-wrap: nowrap;
overflow: auto;
.wrap {
overflow: hidden;
display: block;
>ul {
display: inline-flex;
flex-wrap: nowrap;
padding-right: 3px;
&::-webkit-scrollbar {
display: none;
}
&::-webkit-scrollbar {
display: none;
}
>li {
width: 85px;
min-height: 143px;
margin-right: 10px;
flex-shrink: 0;
>li {
width: 85px;
min-height: 143px;
margin-right: 10px;
flex-shrink: 0;
>a {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
>.img {
>a {
width: 100%;
height: 115px;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
>img {
>.img {
width: 100%;
height: 100%;
}
height: 115px;
position: relative;
.ps {
position: absolute;
bottom: 0;
left: 0;
}
>.mark {
.ps();
width: 100%;
height: 35px;
background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
>.score {
.ps();
font-size: 11px;
color: #faaf00;
font-weight: 600;
margin: 5px;
>img {
width: 100%;
height: 100%;
}
.ps {
position: absolute;
bottom: 0;
left: 0;
}
>.mark {
.ps();
width: 100%;
height: 35px;
background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
>.score {
.ps();
font-size: 11px;
color: #faaf00;
font-weight: 600;
margin: 5px;
}
}
}
}
>h5 {
font-size: @ssfont;
color: #222;
margin-bottom: 2px;
font-weight: 600;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
>h5 {
font-size: @ssfont;
color: #222;
margin-bottom: 2px;
font-weight: 600;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
}
}
}
</style>

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

@@ -13,25 +13,48 @@
<p>主演：{{ movie.star }}</p>
<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>
</div>
</div>
</div>
</div>
</template>
<script>
import requset from "@/utils.js";
import request from '@/utils';
import { nextTick } from 'vue';
export default {
inject: {
data: {
from: "movieList",
default: () => ({}),
},
emits: ["soc"],
data() {
return {
data: []
}
},
async mounted() {
let data = await request("http://101.35.148.193:3000/api/movies/list");
console.log(data)
if (data.success) {
this.data = data.data;
} else {
this.data = undefined;
}
await nextTick();
this.$emit("soc");
},
computed: {
checkdata() {
if (!this.data || !this.data.length) {
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: false }
];
}
return this.data;
}
}
};
</script>
<style lang="less">
@@ -51,6 +74,7 @@ export default {
justify-content: space-between;
padding-right: 14px;
// overflow: hidden;
.img {
width: 64px;
min-width: 64px;
@@ -116,7 +140,6 @@ export default {
}
}
>* {
flex-wrap: 0;
}

1
src/pages/home/components/MyNav.vue
View File

@@ -33,6 +33,7 @@ export default {
}
.nav {
background-color: #fff;
height: 44px;
width: 375px;
.center ();

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

@@ -1,14 +1,12 @@
<template>
<div class="home">
<Headera>狗尾电影</Headera>
<Nav />
<Main />
<Footer />
</div>
</template>
<script>
import Headera from "@/pages/home/components/MyHeader.vue";
import Nav from "@/pages/home/components/MyNav.vue";
import Main from "@/pages/home/components/MyMain.vue";
import Footer from "@/pages/home/components/MyFooter.vue";
import request from "@/utils";
@@ -35,7 +33,6 @@ export default {
},
components: {
Headera,
Nav,
Main,
Footer,
},
@@ -49,9 +46,11 @@ export default {
</script>
<style lang="less" scoped>
.home {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
overflow: hidden;
padding-bottom: 48px;
display: flex;
flex-direction: column;
}
</style>