vue uniapp tabs swipers标签页动态加载子组件，子组件会多次渲染的问题

产生原因
因为上述采用了 tabs选项卡，而且也使用 v-for循环（没办法，主要是 tabs是动态的）。因为子组件写在v-for循环中，每次循环都会创建一次组件，导致创建很多的组件，点击一次tabs循环后的所有的component都发送了请求(或者说所创建的多个子组件都走一遍生命周期)。

解决方案

原理：
给组件的渲染添加限定条件，只有在点击到当前swiper的时候才去渲染组件

代码：

<swiper class="swiper-group" :style="{height:swiperContentHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
     <swiper-item catchtouchmove="stopChange" class="swiper-item" v-for="(item, index) in tabsArr" :key="index">
         <scroll-view @scrolltolower="onreachBottom">
             <!-- 解决页面高度塌陷的问题 -->
             <view style="content: ''; overflow: hidden;"></view>
             <template v-if="item.dataSet && item.dataSet.length > 0">
                 <template v-if="testCurrent===1||testCurrent==='1'">
                     <u-subsection mode="subsection" :list="sublist" :current="subCurrent" @change="sectionChange"></u-subsection>
                     <template>
                     //！！！！！在这里添加限定子组件的渲染条件，index===1是关键，只有用户选中的item等于v-for其中一个才能渲染。
                         <map-component v-if="subCurrent===1&&index===1"/>
                     </template>
                 </template>
                 <template v-else>
                     <block v-for="(items, indexs) in item.dataSet" :key="indexs">
                         <data-item @refreshHandle="refreshList" :itemdata="items" :currentType="current" />
                     </block>
                 </template>
             </template>
             <template v-else>
                 <u-empty text="暂无数据" mode="list"></u-empty>
             </template>
         </scroll-view>
     </swiper-item>
 </swiper>