【uniapp】swiper切换时，v-for重新渲染页面导致文字在视觉上的拉扯问题

问题描述

先用v-for渲染了几个列表，但这几个列表是占同一个位置的，只是通过切换swiper来显示哪个列表显示，也就是为了优化页面切换时候，没有根据swiper的current再更新v-for的数据，但现在就有个问题，怎么隐藏这些列表，并且不占dom。v-if控制的时候，会出现非常明显的重新渲染的闪屏现象。

解决方法

使用position: absolute和clip属性

绝对定位与裁剪：

将元素设置为position: absolute，它就脱离了文档流，不再影响页面布局。然后通过clip属性来裁剪元素，当裁剪区域设置为0时，元素在视觉上就被隐藏了。这种方式下元素仍然在DOM中，但不占据布局空间，并且避免了v - if的重新渲染闪屏问题。

<template>
   <div>
    <swiper :options="swiperOptions">
      <swiper-item v-for="(list, index) in lists" :key="index">
        <div :class="{ 'hidden-class': shouldHide(index) }">
          <!-- 这里渲染列表内容 -->
          <ul>
            <li  v-for="item in list" :key="item.id">{{item.name}}</li>
          </ul>
        </div>
      </swiper-item >
    </swiper>
   </div>   
</template>
   
<script>   
export default {
   data() {
    return {
      currentIndex: 0,
      lists: [
        [
          {id: 1, name: 'List 1-Item 1'},
          {id: 2, name: 'List 1-Item 2'}
        ],
        [
          {id: 3, name: 'List 2-Item 1'},
          {id: 4, name: 'List 2-Item 2'}
        ]
      ],
      swiperOptions: {
        // Swiper的配置选项
      }
    };
   },
   methods: {
    shouldHide(index) {
      return this.currentIndex!== index;
    }
   },
};   
</script>
   
<style>   
	.hidden-class{
	  position: absolute;   
	 clip: rect(0, 0, 0, 0);
	}
</style>