场景:(移动端)A模块内容在当前界面最后面展示时,若需要选择相应条件或切换页签时,IOS会一直显示在页面最底部,不会保留之前的位置?

问题出现在每次切换条件时会先清空数组,然后等接口请求回来后重新赋值,这样就会导致dom重新加载,界面内容重新刷新

解决这个问题其实可以利用空的内容占位,这样不管怎么查询,之前的位置都不会发生变化,那我是利用骨架屏处理的,根据界面结构然后写个最大的视图高度,等数据加载回来就隐藏

测试代码如下:

<template>
  <div>
    <van-skeleton title :row="20" :loading="loading" />
    <div v-for="(item, index) in testList" :key="index">
      {{ item.name }}
    </div>
  </div>
</template>

<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>