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