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>
</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>
<!-- 上拉加载 -->
@@ -40,12 +29,23 @@
color="#3170A8"
style="text-align: center"
>加载中...</van-loading>
<template v-else>
<template v-else-if="!loading">
<div v-if="isShowAll" style="font-size: 12px;text-align: center;color: #999">已加载全部数据</div>
<van-empty v-if="isEmpty" description="暂无数据" />
</template>
</template>
</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>
</template>
@@ -129,6 +129,10 @@ export default {
},
watch: {
data() {
if (this.data.length === 0) {
this.scrollTo(0,0)
this.isEmpty = true
}
this.refreshScroll()
}
},
@@ -191,6 +195,7 @@ export default {
// 下拉刷新回调
async pullingDownHandler () {
this.showPullDownText('pullDownLoading')
this.hidePullUpText()
// 从第一页获取数据
await this.getDataHandler(1)
@@ -201,8 +206,7 @@ export default {
},
showPullUpText () {
this.isEmpty = false
this.isShowAll = false
this.hidePullUpText()
if (this.data.length === 0) {
this.isEmpty = true
} else {
@@ -211,6 +215,10 @@ export default {
}
}
},
hidePullUpText () {
this.isEmpty = false
this.isShowAll = false
},
showPullDownText (key) {
this.isEnterThreshold = false
this.isLeaveThreshold = false
+4 -4
View File
@@ -183,10 +183,10 @@ export default {
methods: {
onSearch () {
this.list = []
this.searchQuery.page = 1
// 返回顶部
this.$refs.scroll.scrollTo(0, 0)
this.getData()
// this.searchQuery.page = 1
// // 返回顶部
// this.$refs.scroll.scrollTo(0, 0)
this.getData(1)
},
getData (page) {
switch (this.$route.query.standType) {
@@ -67,8 +67,8 @@ export default {
setChecked (currentData) {
this.currentSearch = currentData
this.searchQuery.treeId = currentData.id || ''
this.searchQuery.page = 1
this.getData()
this.list = []
this.getData(1)
},
getData (page) {
return new Promise((resolve, reject) => {