perf: 优化loading
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user