uniapp（2）——切换卡片

uniapp原始语法

    <!-- 默认页面 -->
    <view class="main" v-if="active==0">
            
    </view>

    <!-- 页面1 -->
    <view class="main" v-if="active==1">
      
    </view>

    <!-- 页面2 -->
    <view class="main" v-if="active==2">
      
    </view>

methods: {
      selectIndex(item) {
        this.active = item
        if (item == 0) {

            ...
          
        } else if (item == 1) {

            ...

        }else if (item == 2) {
          
            ...
        }
      },
}

data() {
      return {
        active: 0,
        
      }
    },

uview-ui语法

<template>
  <view class="content">
    <Header></Header>
    <view class="home-tabs">
      <u-tabs :list="topBar" @change="changeTabs" :current='current' :inactiveStyle="{
            color: '#AAAAAA',
            transform: 'scale(1)'
        }" :activeStyle="{
            color: '#333333',
            fontWeight: 'bold',
            fontSize:'29rpx'
        }">
      </u-tabs>
    </view>
    <view class="home-swiper">
      <swiper :duration="500" :current="current" @change="changeSwiper">
        <swiper-item v-for="(item,index) in topBar" :key="index">
          <component :is='activeCom'></component>
        </swiper-item>
      </swiper>
    </view>
    
  </view>
</template>

 activeCom: Recommend,
        current: 0,
        topBar: [{
          name: '今日推荐',
        }, {
          name: '美食'
        }, {
          name: '文化'
        }]

methods: {
      // 切换tabs
      changeTabs({index}) {
        this.current = index
        this.tabsCom(index)
      },
      // 切换swiper
      changeSwiper(e) {
        this.current = e.detail.current
        this.tabsCom(e.detail.current)
      },
      // 判断动态组件显示
      tabsCom(index) {
        switch (index) {
          case 0:
            this.activeCom = Recommend
            break;
          case 1:
            this.activeCom = Food
            break;
          case 2:
            this.activeCom = Culture
            break;        
        }
      },
    }