场景:(移动端)A模块内容在当前界面最后面展示时,若需要选择相应条件或切换页签时,IOS会一直显示在页面最底部,不会保留之前的位置?
问题出现在每次切换条件时会先清空数组,然后等接口请求回来后重新赋值,这样就会导致dom重新加载,界面内容重新刷新
解决这个问题其实可以利用空的内容占位,这样不管怎么查询,之前的位置都不会发生变化,那我是利用骨架屏处理的,根据界面结构然后写个最大的视图高度,等数据加载回来就隐藏
测试代码如下:
javascript
<template>
<div>
<van-skeleton title :row="20" :loading="loading" />
<div v-for="(item, index) in testList" :key="index">
{{ item.name }}
</div>
</div>
</template>
javascript
<script>
export default {
name: 'test',
data() {
return {
testList: [],
loading: true,
};
},
methods: {
//获取数据
getData() {
this.testList = [{ name: '你' }, { name: '我' }, { name: '他' }];
this.loading = false;
},
},
created() {
//一般在项目中会先清空数据然后调用接口赋值
this.testList = [];
this.getData();
},
};
</script>