【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>
相关推荐
一條狗几秒前
隨筆 20241224 ts寫入excel表
开发语言·前端·typescript
小码快撩5 分钟前
vue应用移动端访问缓慢问题
前端·javascript·vue.js
低调之人9 分钟前
Fiddler勾选https后google浏览器网页访问不可用
前端·测试工具·https·fiddler·hsts
yayaya15214 分钟前
javaScriptBOM
开发语言·javascript·ecmascript
Riesenzahn15 分钟前
使用vue如何监听元素尺寸的变化?
前端·javascript
阿征学IT19 分钟前
圣诞快乐(h5 css js(圣诞树))
前端·javascript·css
程序员黄同学22 分钟前
如何使用 Flask 框架创建简单的 Web 应用?
前端·python·flask
Sword9923 分钟前
豆包 MarsCode AI Apply功能揭秘:自动代码应用与 Diff 实现
前端·人工智能·豆包marscode
前端与小赵23 分钟前
什么是全栈应用,有哪些特点
前端
a1ex23 分钟前
shadcn/ui 动态 pagination
前端