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

问题描述

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

解决方法

使用position: absolute和clip属性

绝对定位与裁剪:

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

html 复制代码
<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>
相关推荐
_志哥_2 分钟前
解除有些网站不能复制的终极办法
前端·chrome
愚昧之山绝望之谷开悟之坡17 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1726 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记27 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽29 分钟前
flutter中 getx 的使用
前端
Jay丶1 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈1 小时前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
xiaohe06011 小时前
🔒 JavaScript 不是单线程吗?怎么还能上“锁”?!
javascript·github
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript