tab切换

解润东
20220107

src/components/TabBar.vue

 <template>
     <div>
         <!-- 占位导航栏div，防止导航栏挡住内容 -->
+        <!-- <div></div> -->
         <van-tabbar v-model="active" @change="onChange" route>
             <van-tabbar-item
                 v-for="(item, index) in tabBarList"

src/views/checkedConfirm/index.vue

@@ -11,19 +11,23 @@
 <template>
     <div>
        <LHeader v-bind:text="text" :goback="goback"></LHeader>
-        <div class="card" v-for="(item,index) in checkedConfirmList"  :key="index"  @click="cardLocation(item)">
-            <div>负责人：{{item.realName}}</div>
-            <div>检查名称：{{item.name}}</div>
-            <div>开始时间：{{item.planStartTime}}</div>
-            <div v-show="item.isOpen">
-                <div>结束时间：{{item.planEndTime}}</div>
-                <div>检查地点：{{item.address}}</div>
-                <div>检查类型：{{item.type}}</div>
-            </div>
-             <div class="more" @click.stop="toggle(item)">
-                {{ item.OpenText }}
-            </div>
-        </div>
+       <van-tabs v-model="active" :swipe-threshold="3"	>
+            <van-tab  v-for="(item,index) in checkedConfirmList"  :key="index" :title="item.title">
+                <div class="card" v-for="(it,index) in item.list"  :key="index"  @click="cardLocation(it)">
+                    <div>负责人：{{it.realName}}</div>
+                    <div>检查名称：{{it.name}}</div>
+                    <div>开始时间：{{it.planStartTime}}</div>
+                    <div v-show="it.isOpen">
+                        <div>结束时间：{{it.planEndTime}}</div>
+                        <div>检查地点：{{it.address}}</div>
+                        <div>检查类型：{{it.type}}</div>
+                    </div>
+                    <div class="more" @click.stop="toggle(it)">
+                        {{ it.OpenText }}
+                    </div>
+                </div>
+            </van-tab>
+        </van-tabs>
         <tab-bar :index="1"></tab-bar>
     </div>
 </template>
@@ -40,6 +44,7 @@ export default {
     },
     data() {
         return {
+            active:'0',//默认选中状态
             goback:'save-workbench',//返回工作台
             checkedConfirmList:[],//检查确认列表
             text:'检查确认列表',//顶部文本
@@ -61,13 +66,14 @@ export default {
             getFun('check/confirm/list').then((Response)=>{
                 this.checkedConfirmList=Response.data
                 this.checkedConfirmList.forEach((item)=>{
-                    item.isOpen=false
-                    item.OpenText="展开 ▼";
+                    item.list.forEach((it)=>{
+                        it.isOpen=false
+                        it.OpenText="展开 ▼";
+                    })
                 })
                 this.$toast.clear()
             }).catch(()=>{
                 this.$toast.clear()
-                this.$toast.fail('加载失败,请稍后再试')
             })
         },
         cardLocation(item){
@@ -110,6 +116,5 @@ export default {
         right: 15px;
         color: #2a80f7;
         font-weight: none;
-        z-index: 99;
     }
 </style>