h5-colexiu/src/views/shop-mall/index.tsx

import ColHeader from '@/components/col-header'
import { Divider, Icon, Image, Sticky, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import { defineComponent } from 'vue'
import HotGoods from './components/hot-goods'
import MenuList from './components/menu-list'
import TabList from './components/tab-list'
import styles from './index.module.less'
import { useElementSize } from '@vueuse/core'
import iconShopCart from './images/icon-shop-cart.png'

export default defineComponent({
  name: 'shop-mall',
  data() {
    return {
      height: 'auto' as any
    }
  },
  mounted() {
    const { height } = useElementSize((this as any).$refs.headers)
    this.height = height
  },
  methods: {
    onSearch() {}
  },
  render() {
    return (
      <div style={{ overflow: 'hidden' }}>
        <div ref="headers">
          <ColHeader
            border={false}
            background="linear-gradient(#59e5d5, 30%, #f6f8f9)"
            v-slots={{
              right: () => (
                <div class={styles['icon-shop-cart']}>
                  <span class={styles.dot}>12</span>
                  <Icon name={iconShopCart} size={24} />
                </div>
              )
            }}
          />
        </div>
        <Swipe
          class={styles.swipe}
          autoplay={3000}
          showIndicators={false}
          lazyRender
        >
          <SwipeItem>
            <Image
              class={styles.swipeItemImg}
              src={'https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png'}
              fit="cover"
            />
          </SwipeItem>
          <SwipeItem>
            <Image
              class={styles.swipeItemImg}
              src={'https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png'}
              fit="cover"
            />
          </SwipeItem>
        </Swipe>

        <MenuList />

        <HotGoods />

        <Tabs
          shrink
          lineWidth={25}
          background={'#f6f8f9'}
          color="var(--van-primary)"
          class={styles.tabs}
          sticky
          offsetTop={this.height}
          lazyRender
        >
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
          <Tab title="全部商品">
            <TabList />
          </Tab>
        </Tabs>
      </div>
    )
  }
})