提交 22652d36 authored 作者: 王鹏飞's avatar 王鹏飞

优化页面加载

上级 f3f002e6
<template> <template>
<div class="main-container"> <div class="main-container" v-show="loaded">
<div class="course-title">{{detail.course_name}}</div> <div class="course-title">{{detail.course_name}}</div>
<van-tabs <van-tabs
class="main-tabs" class="main-tabs"
...@@ -33,6 +33,7 @@ export default { ...@@ -33,6 +33,7 @@ export default {
data() { data() {
return { return {
tabActive: '0', tabActive: '0',
loaded: false,
detail: {} detail: {}
} }
}, },
...@@ -60,8 +61,9 @@ export default { ...@@ -60,8 +61,9 @@ export default {
message: '加载中...', message: '加载中...',
forbidClick: true forbidClick: true
}) })
this.loaded = false
api.getCourse(this.courseId).then(response => { api.getCourse(this.courseId).then(response => {
this.loaded = true
response.chapters = response.chapters.filter(item => { response.chapters = response.chapters.filter(item => {
item.children = item.children.filter(child => child.type === 2) item.children = item.children.filter(child => child.type === 2)
return item.children.length return item.children.length
......
<template> <template>
<div class="course-tag-wrapper"> <div class="course-tag-wrapper" v-show="loaded">
<div class="course-tag-hd"> <div class="course-tag-hd">
<h1 class="tag-title">{{detail.title}}</h1> <h1 class="tag-title">{{detail.title}}</h1>
</div> </div>
...@@ -17,6 +17,7 @@ export default { ...@@ -17,6 +17,7 @@ export default {
name: 'CourseTagItem', name: 'CourseTagItem',
data() { data() {
return { return {
loaded: false,
detail: {} detail: {}
} }
}, },
...@@ -38,7 +39,9 @@ export default { ...@@ -38,7 +39,9 @@ export default {
message: '加载中...', message: '加载中...',
forbidClick: true forbidClick: true
}) })
this.loaded = false
api.getCourseTag(this.tagId).then(response => { api.getCourseTag(this.tagId).then(response => {
this.loaded = true
this.detail = response this.detail = response
this.$toast.clear() this.$toast.clear()
}) })
...@@ -57,8 +60,11 @@ export default { ...@@ -57,8 +60,11 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.course-tag-hd { .course-tag-hd {
position: sticky;
top: 0;
padding: 0.4rem; padding: 0.4rem;
background-color: #fff; background-color: #fff;
z-index: 10;
} }
.course-tag-bd { .course-tag-bd {
padding: 0.4rem; padding: 0.4rem;
......
<template> <template>
<div class="course-tag-wrapper"> <div class="course-tag-wrapper" v-show="loaded">
<div class="course-tag-hd"> <div class="course-tag-hd">
<h1 class="course-title">{{detail.course_name}}</h1> <h1 class="course-title">{{detail.course_name}}</h1>
</div> </div>
...@@ -22,6 +22,7 @@ export default { ...@@ -22,6 +22,7 @@ export default {
name: 'CourseTagList', name: 'CourseTagList',
data() { data() {
return { return {
loaded: false,
detail: { chapters: [] } detail: { chapters: [] }
} }
}, },
...@@ -53,7 +54,9 @@ export default { ...@@ -53,7 +54,9 @@ export default {
message: '加载中...', message: '加载中...',
forbidClick: true forbidClick: true
}) })
this.loaded = false
api.getCourseTagList(this.courseId).then(response => { api.getCourseTagList(this.courseId).then(response => {
this.loaded = true
this.detail = response this.detail = response
this.$toast.clear() this.$toast.clear()
}) })
...@@ -83,8 +86,11 @@ export default { ...@@ -83,8 +86,11 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.course-tag-hd { .course-tag-hd {
position: sticky;
top: 0;
padding: 0.4rem; padding: 0.4rem;
background-color: #fff; background-color: #fff;
z-index: 10;
} }
.course-tag-bd { .course-tag-bd {
padding: 0.4rem; padding: 0.4rem;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论