1、先是上拉刷新下拉加载,van-pull-refresh。如果不想一进来就加载两次可以在van-list上加上:immediate-check=“false”。
//上拉加载
onLoad() {
if (!this.timer) {
this.timer = setTimeout(() => {
this.getData();
this.timer = null;
}, 1000)
}
},
getData() {
const search= {
name: "",
pageNum: this.listQuery.page,
pageSize: this.listQuery.limit,
}
this.$axios({
url: '/search/xxxxx',
method: 'post',
data:search
}).then(res => {
this.tempList = res.data.data;
if (this.listQuery.page == 1) {
this.tableData = this.tempList;
} else {
this.tempList.forEach(item => {
this.tableData.push(item)
})
}
this.loading = false;
if (this.tempList.length == this.listQuery.limit && this.listQuery.limit !== res.data.total) {
this.listQuery.page++;
this.loading = false;
} else {
this.finished = true;
}
})
},
onRefresh() {
if (!this.timer2) {
this.timer2 = setTimeout(() => {
this.listQuery.page = 1;
this.refreshing = false;
this.finished = false;
this.loading = true;
this.getData();
this.timer2 = null;
}, 1000)
}
},
2、判断是否回退进入页面,通过在router.js
里定义当前页面的meta 的值keepAlive
为true和isBack
为false。
beforeRouteEnter(to, from, next) {
to.meta.isBack = false;
//判断是否为子页面回退
if (from.name == 'detail') {
to.meta.isBack = true;
}
next();
},
activated() {
if (!this.$route.meta.isBack) {
this.tableData = [];
this.onRefresh();
}
}
3、在需要滚动的页面元素上添加ref
,如下定义ref=“scrollPoll”
,注意定义的元素要设置样式overflow-y: auto;
<div class="box" ref="scrollPoll">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
:immediate-check="false" :offset='50'>
<van-collapse v-model="activeName" accordion class="vancoll">
<van-collapse-item v-for="(item,index) in tableData" :key="index">
<template #title>
<div class="listContent">
<div class="headerTitle">
{{ item.company }}
</div>
</div>
</template>
</van-collapse-item>
</van-list>
</van-pull-refresh>
</div>
在data里定义scrollY:0
,在去详情页的方法里赋值。记得在activated
判断进入页面的滚动初始值:
methods: {
goDetail(url){
this.scrollY = this.$refs.scrollPoll.scrollTop;
//这里下面就写进入详情页等自己的内容
this.$router.push(url);
}
},
activated() {
if (!this.$route.meta.isBack) {
this.$refs.scrollPollut.scrollTop = 0;
this.tableData = [];
this.onRefresh();
}else{
this.$refs.scrollPoll.scrollTop = this.scrollY;
}
}
版权声明:本文为m0_57071129原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。