vuetab按钮切换动态数据间隙按钮位置掉低的问题

Posted 2023-05-04

1.简单版原理：用点击事件改变num值作为开关，控制tab样式和内容显示隐藏。

2.数据渲染原理：主要利用v-for绑定的index来控制，跟上面差不多。

二、组件切换。
1。知识点主要是vue中is的特性，和keep-alive缓存

三、路由切换。（对地址栏和数据请求友好）
通过router-link实现。

vue tab切换保持数据状态

页面做tab切换，由于组件每一次切换都会重新实例化组件，我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新，减少页面重新渲染以及减少请求
实现方法：使用<keep-alive></keep-alive>包裹组件
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="记录">
<keep-alive>
<child1 v-if="isChildUpdate"></child1>
</keep-alive>
</el-tab-pane>
</el-tabs>
列表页面跳转详情 ，列表页面保持上一次操作状态
通过是否加载router-view 和路由元meta设置页面是否需要缓存来实现

router-view嵌套多层的话，可能要设置多层，然后通过beforeRouteLeave监听路由离开，设置是否缓存

//从其他页面跳转不需要缓存页面  从详情页面回来则需要缓存
总结

到此这篇关于vue实现tab切换的3种方式及切换保持数据状态的文章就介绍到这了,更多相关vue tab切换方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 参考技术A 同事的代码是获取tabsList数据的同时对active进行赋值，我就猜测是否是赋值过快导致页面渲染未完成，定位不准造成。于是进行改造

this.tabsList = res.data || []
this.$nextTick(()=>
this.activeName = this.$route.query.id
)
1
2
3
4
1
2
3
4
将赋值放于n e x t T i c k 中 ， nextTick中，nextTick中，nextTick的效果是页面加载完成后再执行。具体请查看官方文档。到这里，发现问题已解决

单击动态按钮后未显示的信息（使用切换）

我在点击“更多信息”按钮后尝试显示一些其他信息。

首先，div是根据我的数据库动态生成的。哪个div包含“更多信息”按钮，单击该按钮时应显示更多信息。但是，只有第一个按钮有效，单击时，会显示所有生成的div中的所有“更多信息”。

我想只有与我点击的div相关的更多信息才能显示/隐藏，而其他人仍然隐藏。

这是HTML / PHP

<div id="event_info">
   <img src= "<?php echo $row['img'];?> "/>
   <div class="event_description">
      <h1><?php echo $row['gathering_name'];?></h1>
      <b>Hosted By:</b> <?php echo $row['event_host'];?> </br>
      <b>Location:</b> <?php echo $row['city'].', '. $row['state']; ?></br>
      <b>Date:</b> <?php $event_date = strtotime($row['event_start']);
         echo date("F jS, Y" , $event_date);?></br></br>
      <!-- MORE INFO ABOUT THE GATHERINGS -->
      <button class="findButton2" id="<?php echo $row['id'];?>">MORE INFO</button>
      <div id="<?php echo $row['id'];?>" class="event_moreinfo">
         <?php echo $row['description'];?></br>
         <b>Gym Name: </b> <?php echo $row['gym_name'];?> </br>
         <b>Gym Address: </b>  <?php echo $row['street_address'];?></br>
         <?php echo $row['city'].', '.$row['state'].', '. $row['country'];?></br>
         <b>Nearest Airport: </b> <?php echo $row['nearest_airport'];?></br>
         <b>Expected Attendance: </b> <?php echo $row['attendance']; ?></br>
         <b>Average Ticket Cost: </b> <?php echo $row['event_cost']; ?> </br>
         <b>Contact: </b> <a href = "mailto:<?php echo $row['host_email'];?>"> Host Email</a>               
      </div>
   </div>
</div>

这是我的脚本（jQuery）

$(document).ready(function() {
    var event_id = $(".findButton2").attr("id");
    $('#' + event_id).on('click', function() {
        $(".event_moreinfo").toggle(1000);
    });
});

答案

这是因为所有动态div都具有相同的类名event_moreinfo。使用this和next来toogle你的div如下。当点击按钮时，它只会切换下一个具有类event_moreinfo的div。

$(document).ready(function() {
    var event_id = $(".findButton2").attr("id");
    $('#' + event_id).on('click', function() {
        $(this).next(".event_moreinfo").toggle(1000);
    });
});

另一答案

多个元素具有相同的ID，而ID应该是唯一的。我想这对于整个文档都是如此，也是您的代码可能无法按预期工作的原因之一。此外，您正在动态生成div，因此您最好委托绑定一个祖先，以确保触发任何子div上的任何单击。让我们说所有这些div都是<div class=“event_table”>元素的直接子元素

$(‘.event_table’).on(‘click’, ‘.event_info’, function () { 
    $(‘this’).find(‘.event_moreinfo’).toggle(1000);
});

将能够正确识别用户点击的元素。

有关JQuery official documentation问题的更多信息