h5-colexiu-website/src/views/home/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import MFooter from '@/components/m-footer';
import { Tab, Tabs } from 'vant';
import aiBanner from './images/co-ai/banner.png';
import musicBanner from './images/music-room/banner.png';
import CoAi from './co-ai';
import PianoRoom from './piano-room';
import MusicRoom from './music-room';
import CoTenant from './co-tenant';
import CoPerson from './co-person';
import { useScroll } from '@vueuse/core';

export default defineComponent({
  name: 'home-page',
  setup() {
    const state = reactive({
      activeTab: 1,
      banner: aiBanner
    });
    const homeRef = ref<HTMLElement | null>(null);
    // const { x, y, isScrolling, arrivedState, directions } = useScroll(homeRef);

    return () => (
      <div class={styles.home} ref={homeRef}>
        <MHeader />

        <div class={styles.banner}>
          <img class={styles.bannerImg} src={state.banner} />
        </div>

        <Tabs
          v-model:active={state.activeTab}
          lazyRender
          class={styles.tabs}
          lineHeight={0}
          shrink
          // sticky
          // swipeable
          onUpdate:active={(val: number) => {
            if (val === 1) {
              state.banner = aiBanner;
            } else if (val === 2) {
              state.banner =
                'https://oss.dayaedu.com/klx/1699439721208banner.png';
            } else if (val === 3) {
              state.banner = musicBanner;
            } else if (val === 4) {
              state.banner =
                'https://oss.dayaedu.com/klx/1699439591804banner.png';
            } else if (val === 5) {
              state.banner =
                'https://oss.dayaedu.com/klx/1699439359542banner.png';
            }
          }}>
          <Tab title={'小酷Ai' + y.value} name={1}>
            <CoAi />
          </Tab>
          <Tab title="云酷琴房" name={2}>
            <PianoRoom />
          </Tab>
          <Tab title="音乐数字课堂" name={3}>
            <MusicRoom />
          </Tab>
          <Tab title="酷乐秀机构版" name={4}>
            <CoTenant />
          </Tab>
          <Tab title="酷乐秀个人版" name={5}>
            <CoPerson />
          </Tab>
        </Tabs>

        <MFooter />
      </div>
    );
  }
});