perf: 优化loading

This commit is contained in:
zyn
2023-12-01 16:26:54 +08:00
parent a5e3fd56a7
commit d77dae6292
3 changed files with 28 additions and 20 deletions
@@ -17,17 +17,6 @@
</div> </div>
</template> </template>
<!-- 除上拉和下拉之外的loading -->
<van-loading
v-if="loading && !pullDownLoading && !pullUpLoading"
class="pageLoading"
type="spinner"
size="16px"
text-size="12px"
color="#3170A8"
style="text-align: center"
>加载中...</van-loading>
<slot></slot> <slot></slot>
<!-- 上拉加载 --> <!-- 上拉加载 -->
@@ -40,12 +29,23 @@
color="#3170A8" color="#3170A8"
style="text-align: center" style="text-align: center"
>加载中...</van-loading> >加载中...</van-loading>
<template v-else> <template v-else-if="!loading">
<div v-if="isShowAll" style="font-size: 12px;text-align: center;color: #999">已加载全部数据</div> <div v-if="isShowAll" style="font-size: 12px;text-align: center;color: #999">已加载全部数据</div>
<van-empty v-if="isEmpty" description="暂无数据" /> <van-empty v-if="isEmpty" description="暂无数据" />
</template> </template>
</template> </template>
</div> </div>
<!-- 除上拉和下拉之外的loading -->
<van-loading
v-if="loading && !pullDownLoading && !pullUpLoading"
class="pageLoading"
type="spinner"
size="16px"
text-size="12px"
color="#3170A8"
style="text-align: center"
>加载中...</van-loading>
</div> </div>
</template> </template>
@@ -129,6 +129,10 @@ export default {
}, },
watch: { watch: {
data() { data() {
if (this.data.length === 0) {
this.scrollTo(0,0)
this.isEmpty = true
}
this.refreshScroll() this.refreshScroll()
} }
}, },
@@ -191,6 +195,7 @@ export default {
// 下拉刷新回调 // 下拉刷新回调
async pullingDownHandler () { async pullingDownHandler () {
this.showPullDownText('pullDownLoading') this.showPullDownText('pullDownLoading')
this.hidePullUpText()
// 从第一页获取数据 // 从第一页获取数据
await this.getDataHandler(1) await this.getDataHandler(1)
@@ -201,8 +206,7 @@ export default {
}, },
showPullUpText () { showPullUpText () {
this.isEmpty = false this.hidePullUpText()
this.isShowAll = false
if (this.data.length === 0) { if (this.data.length === 0) {
this.isEmpty = true this.isEmpty = true
} else { } else {
@@ -211,6 +215,10 @@ export default {
} }
} }
}, },
hidePullUpText () {
this.isEmpty = false
this.isShowAll = false
},
showPullDownText (key) { showPullDownText (key) {
this.isEnterThreshold = false this.isEnterThreshold = false
this.isLeaveThreshold = false this.isLeaveThreshold = false
+4 -4
View File
@@ -183,10 +183,10 @@ export default {
methods: { methods: {
onSearch () { onSearch () {
this.list = [] this.list = []
this.searchQuery.page = 1 // this.searchQuery.page = 1
// 返回顶部 // // 返回顶部
this.$refs.scroll.scrollTo(0, 0) // this.$refs.scroll.scrollTo(0, 0)
this.getData() this.getData(1)
}, },
getData (page) { getData (page) {
switch (this.$route.query.standType) { switch (this.$route.query.standType) {
@@ -67,8 +67,8 @@ export default {
setChecked (currentData) { setChecked (currentData) {
this.currentSearch = currentData this.currentSearch = currentData
this.searchQuery.treeId = currentData.id || '' this.searchQuery.treeId = currentData.id || ''
this.searchQuery.page = 1 this.list = []
this.getData() this.getData(1)
}, },
getData (page) { getData (page) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {