以下代码为我复现的demo,不是实际代码,实际代码更为复杂
以下代码在浏览器中测不出来我说的效果,需要在真机或者手机模拟器中运行
在父组件中通过 component :is 实现动态切换组件
<view class="nav_item" v-for="tab in tabs" :key="tab.id"
:class="{
on: currentTab === tab.id
}"
:data-id="tab.id"
@click="changeTab(tab)"
>{{ tab.text }}</view>
<component ref='child' :is="currentComponents" ></component>
import Activity from '/components/story/activity.vue';
import Everyone from '/components/story/everyone.vue';
import Recommend from '/components/story/recommend.vue';
const tab = [{
id: 'activity',
text: '活动',
component: Activity,
}.....]
const currentTab = ref('recommend');
const currentComponents = computed(() => tabs.find(tab => tab.id === currentTab.value).component);
const changeTab = (tab) => {
currentTab.value = tab.id;
}
Activity 组件中
<view class="activity">
活动
</view>
Recommend 组件中
<swiper indicator-dots>
<swiper-item>
<view class="swiper-item">推荐 内容一</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">推荐 内容二</view>
</swiper-item>
</swiper>
Everyone 组件中
<swiper indicator-dots>
<swiper-item>
<view class="swiper-item">大家 内容一</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">大家 内容二</view>
</swiper-item>
</swiper>