file-starter/.claude/commands/mini-ui-轮播图组件使用.md

---

description: "小程序轮播图组件使用指令"

import { View } from '@tarojs/components'
import { Carousel, CarouselItem } from './carousel'
import { useState } from 'react'
import Taro from '@tarojs/taro'

// 示例1：基础用法
export function BasicCarouselExample() {
  const items: CarouselItem[] = [
    {
      src: 'https://picsum.photos/400/200?random=1',
      title: '第一张轮播图',
      description: '这是第一张轮播图的描述文字'
    },
    {
      src: 'https://picsum.photos/400/200?random=2',
      title: '第二张轮播图',
      description: '这是第二张轮播图的描述文字'
    },
    {
      src: 'https://picsum.photos/400/200?random=3',
      title: '第三张轮播图',
      description: '这是第三张轮播图的描述文字'
    }
  ]

  return (
    <View className="p-4">
      <View className="text-lg font-semibold mb-4">基础轮播图</View>
      <Carousel items={items} />
    </View>
  )
}

// 示例2：自定义配置
export function CustomCarouselExample() {
  const items: CarouselItem[] = [
    {
      src: 'https://picsum.photos/400/300?random=4',
      title: '精选商品',
      description: '限时优惠，立即抢购'
    },
    {
      src: 'https://picsum.photos/400/300?random=5',
      title: '新品上市',
      description: '最新款式，引领潮流'
    },
    {
      src: 'https://picsum.photos/400/300?random=6',
      title: '特价促销',
      description: '全场5折起，不容错过'
    }
  ]

  return (
    <View className="p-4">
      <View className="text-lg font-semibold mb-4">自定义配置轮播图</View>
      <Carousel
        items={items}
        height={300}
        interval={4000}
        indicatorPosition="bottom"
        rounded="lg"
        onItemClick={(item, index) => {
          console.log('点击了第', index + 1, '张轮播图:', item.title)
        }}
        onChange={(current) => {
          console.log('切换到第', current + 1, '张')
        }}
      />
    </View>
  )
}

// 示例3：无指示器轮播
export function NoIndicatorsCarouselExample() {
  const items: CarouselItem[] = [
    {
      src: 'https://picsum.photos/400/150?random=7',
      link: '/pages/product/1'
    },
    {
      src: 'https://picsum.photos/400/150?random=8',
      link: '/pages/product/2'
    },
    {
      src: 'https://picsum.photos/400/150?random=9',
      link: '/pages/product/3'
    }
  ]

  return (
    <View className="p-4">
      <View className="text-lg font-semibold mb-4">无指示器轮播图</View>
      <Carousel
        items={items}
        showIndicators={false}
        height={150}
        rounded="md"
      />
    </View>
  )
}

// 示例4：圆形指示器轮播
export function CircularIndicatorsCarouselExample() {
  const items: CarouselItem[] = [
    {
      src: 'https://picsum.photos/400/250?random=10',
      title: '活动预告'
    },
    {
      src: 'https://picsum.photos/400/250?random=11',
      title: '会员专享'
    },
    {
      src: 'https://picsum.photos/400/250?random=12',
      title: '积分兑换'
    },
    {
      src: 'https://picsum.photos/400/250?random=13',
      title: '限时秒杀'
    }
  ]

  return (
    <View className="p-4">
      <View className="text-lg font-semibold mb-4">圆形指示器轮播图</View>
      <Carousel
        items={items}
        autoplay={true}
        interval={2000}
        indicatorPosition="bottom"
        rounded="xl"
        height={250}
      />
    </View>
  )
}

// 示例5：顶部指示器轮播
export function TopIndicatorsCarouselExample() {
  const items: CarouselItem[] = [
    {
      src: 'https://picsum.photos/400/180?random=14',
      title: '顶部指示器',
      description: '指示器位于顶部'
    },
    {
      src: 'https://picsum.photos/400/180?random=15',
      title: '美观设计',
      description: '简洁优雅的界面'
    },
    {
      src: 'https://picsum.photos/400/180?random=16',
      title: '用户体验',
      description: '流畅的交互体验'
    }
  ]

  return (
    <View className="p-4">
      <View className="text-lg font-semibold mb-4">顶部指示器轮播图</View>
      <Carousel
        items={items}
        indicatorPosition="top"
        height={180}
        rounded="lg"
      />
    </View>
  )
}

// 综合示例：轮播图页面
export function CarouselDemoPage() {
  const [currentExample, setCurrentExample] = useState(0)

  const examples = [
    { title: '基础用法', component: BasicCarouselExample },
    { title: '自定义配置', component: CustomCarouselExample },
    { title: '无指示器', component: NoIndicatorsCarouselExample },
    { title: '圆形指示器', component: CircularIndicatorsCarouselExample },
    { title: '顶部指示器', component: TopIndicatorsCarouselExample }
  ]

  const CurrentComponent = examples[currentExample].component

  return (
    <View className="min-h-screen bg-gray-50">
      <View className="p-4 bg-white">
        <View className="text-xl font-bold text-center mb-4">
          轮播图组件示例
        </View>
        
        {/* 切换示例 */}
        <View className="flex justify-center gap-2 mb-4">
          {examples.map((example, index) => (
            <View
              key={index}
              className={`px-3 py-1 text-sm rounded-full cursor-pointer ${
                currentExample === index
                  ? 'bg-blue-500 text-white'
                  : 'bg-gray-200 text-gray-700'
              }`}
              onClick={() => setCurrentExample(index)}
            >
              {example.title}
            </View>
          ))}
        </View>
      </View>

      <View className="p-4">
        <CurrentComponent />
      </View>

      {/* 使用说明 */}
      <View className="p-4 bg-white mt-4">
        <View className="text-lg font-semibold mb-2">使用说明</View>
        <View className="text-sm text-gray-600 space-y-1">
          <View>• 支持自动播放和手动切换</View>
          <View>• 可自定义指示器位置和样式</View>
          <View>• 支持点击事件和切换回调</View>
          <View>• 内置图片懒加载和错误处理</View>
          <View>• 响应式设计，适配不同屏幕尺寸</View>
        </View>
      </View>
    </View>
  )
}

// 实际页面使用示例
export function HomeCarousel() {
  const bannerItems: CarouselItem[] = [
    {
      src: 'https://via.placeholder.com/750x400/3B82F6/FFFFFF?text=Banner+1',
      title: '新品上市',
      description: '最新款式，限时优惠',
      link: '/pages/goods/new-arrival'
    },
    {
      src: 'https://via.placeholder.com/750x400/EF4444/FFFFFF?text=Banner+2',
      title: '限时秒杀',
      description: '每日特价，不容错过',
      link: '/pages/goods/flash-sale'
    },
    {
      src: 'https://via.placeholder.com/750x400/10B981/FFFFFF?text=Banner+3',
      title: '会员专享',
      description: '会员专享折扣和福利',
      link: '/pages/member/benefits'
    }
  ]

  const handleBannerClick = (item: CarouselItem, index: number) => {
    if (item.link) {
      // 使用Taro跳转
      Taro.navigateTo({
        url: item.link
      })
    }
  }

  return (
    <View className="w-full">
      <Carousel
        items={bannerItems}
        height={400}
        autoplay={true}
        interval={4000}
        circular={true}
        rounded="none"
        onItemClick={handleBannerClick}
      />
    </View>
  )
}