vant 上拉加载下拉刷新
<template>
<div class="document">
<!-- 头部 -->
<van-nav-bar class="head" :title="title" />
<div class="head-h"></div>
<!-- 必备开始 -->
<van-pull-refresh class="scrol-wraper" v-model="isLoading" @refresh="onRefresh">
<van-list
class="list-con"
v-model="isUpLoading"
:finished="upFinished"
:offset="offset"
finished-text="没有更多了"
@load="onLoad"
>
<div
class="doc-list"
v-for="(item) in listData"
:key="item.id"
@click="download(item.file_path)"
>
<img class="doc-list-img" width="36" src="~@/assets/images/document-img01.png" alt />
<p class="doc-list-title ellipsis1">{{item.name}}</p>
<img class="doc-list-icon" width="16" src="~@/assets/images/document-down-icon.png" alt />
</div>
</van-list>
</van-pull-refresh>
<!-- 必备结束 -->
</div>
</template>
<script>
export default {
name: 'document',
data() {
return {
title: '一企一档',
isLoading: false,
isUpLoading: false,
upFinished: false,
offset: 100,
total: 0,
page: {
pageSize: 10,
pageNum: 1
},
timer: null,
listData: []
}
},
methods: {
download(path) {
let url = this.IP + path
window.location.href = url
},
async getInfo() {
try {
let data = {
page: this.page.pageNum
}
let res = await this.$api.document.lists(data)
res.list.data.forEach((item) => {
this.listData.push(item)
})
this.total = res.list.total
if (this.listData.length >= this.total) {
this.upFinished = true
}
this.timer = null
this.isUpLoading = false
this.page.pageNum++
} catch (error) {
this.listData = []
}
},
onRefresh() {
setTimeout(() => {
this.$toast('刷新成功')
this.isLoading = false
this.upFinished = false
this.page.pageNum = 1
this.listData = []
}, 500)
},
onLoad() {
if (!this.timer) {
this.timer = setTimeout(() => {
this.getInfo()
}, 500)
}
}
}
}
</script>
<style lang="scss" scoped>
.document >>> .van-nav-bar__title {
color: #fff;
}
.document >>> .van-icon {
color: #fff;
}
.document >>> .van-nav-bar__text {
color: #fff;
}
.document >>> .van-nav-bar__text:active {
background-color: transparent;
}
.document {
height: calc(100vh - 1.33333rem);
background: #f2f2f2;
.head {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #0a7bef;
background: url('~@/assets/images/header-bg.png') no-repeat center;
background-size: cover;
}
.head-h {
height: 45px;
}
.doc-list {
margin: 10px 4%;
background: #fff;
border-radius: 5px;
padding: 12px 15px;
display: flex;
align-items: center;
.doc-list-img {
flex-shrink: 0;
}
.doc-list-title {
flex-grow: 1;
font-size: 16px;
color: #333;
padding-left: 10px;
}
.doc-list-icon {
flex-shrink: 0;
}
.ellipsis1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis2 {
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
</style>