下拉刷新van-pull-refresh、回退keepAlive、滚动记住位置scroll_vant pullrefresh 记住滚动位置

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)
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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();
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在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;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16