电子商务网站设计html模板网页设计与制作心得体会1500字

问题描述

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