使用vue写一个tab切换, 当tab切换时内容的滚动区域可否不要相互影响

demo:
https://codepen.io/anon/pen/o…

就是说 当我点击tab1时,tab1的内容滚动到tab1-20时, 然后点击tab2,tab2的内容应该是从tab2-1开始的,但是实际上是从tab2-20开始,tab1的内容滚动位置影响了tab2的内容展示

期望: tab下面内容的滚动应该相互独立,不应相互影响
实际: tab下面内容的滚动会影响其它tab内容的滚动位置

请指教,谢谢

回答:

删掉 .tab-content ,将类挪到里面去,这样各个的 overflow 就不一样;然后将 v-if 换成 v-show,元素就不会被销毁。

    <!-- <keep-alive></keep-alive> -->
    <div class="tab-content" v-show="activeIndex === 0">
      <div v-for="i in all">tab1-{{i}}</div>
    </div>
    <div class="tab-content" v-show="activeIndex === 1">
      <div v-for="i in all">tab2-{{i}}</div>
    </div>
    <div class="tab-content" v-show="activeIndex === 2">
      <div v-for="i in all">tab3-{{i}}</div>
    </div>

回答:

可以试试这样:
最外的div 上加 v-if
<div v-if = ‘show’ class=”tab-content” >

每次tab切换,都动态改变show;

new Vue({
  el: '#app',
  data: {
    show:false,
    activeIndex: 0,
    all: 50
  },
   methods: {
     tabClick(index) {
       this.show = false;
       this.$nextTick(()=>{
           this.show = true;
           this.activeIndex = index
        })
      }
   }
})

回答:

请问楼主怎么解决的啊!

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注