廊坊网站建,近期新闻热点事件摘抄,歪歪小站 wordpress,常熟智能网站建设问题描述
先用v-for渲染了几个列表#xff0c;但这几个列表是占同一个位置的#xff0c;只是通过切换swiper来显示哪个列表显示#xff0c;也就是为了优化页面切换时候#xff0c;没有根据swiper的current再更新v-for的数据#xff0c;但现在就有个问题#xff0c;怎么隐…问题描述
先用v-for渲染了几个列表但这几个列表是占同一个位置的只是通过切换swiper来显示哪个列表显示也就是为了优化页面切换时候没有根据swiper的current再更新v-for的数据但现在就有个问题怎么隐藏这些列表并且不占dom。v-if控制的时候会出现非常明显的重新渲染的闪屏现象。
解决方法
使用position: absolute和clip属性
绝对定位与裁剪 将元素设置为position: absolute它就脱离了文档流不再影响页面布局。然后通过clip属性来裁剪元素当裁剪区域设置为0时元素在视觉上就被隐藏了。这种方式下元素仍然在DOM中但不占据布局空间并且避免了v - if的重新渲染闪屏问题。
templatedivswiper :optionsswiperOptionsswiper-item v-for(list, index) in lists :keyindexdiv :class{ hidden-class: shouldHide(index) }!-- 这里渲染列表内容 --ulli v-foritem in list :keyitem.id{{item.name}}/li/ul/div/swiper-item /swiper/div
/templatescript
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;}},
};
/scriptstyle .hidden-class{position: absolute; clip: rect(0, 0, 0, 0);}
/style
