Skip to content

feat(swiper): 实现 Swiper 轮播组件 #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skiyee wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(swiper): 实现 Swiper 轮播组件 #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions examples/uni/src/pages-basic/swiper/autoplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const images = [
{ color: '#3b82f6', title: '图片 1' },
{ color: '#10b981', title: '图片 2' },
{ color: '#f59e0b', title: '图片 3' },
{ color: '#ef4444', title: '图片 4' },
]
</script>

<template>
<view class="p-4 w-full">
<view class="mb-4">
<view class="text-lg font-bold mb-2">
自动播放
</view>
<view class="text-sm text-neutral-dim">
轮播图会每 3 秒自动切换
</view>
</view>

<SkSwiper
v-model="current"
:autoplay="true"
:interval="3000"
height="200px"
>
<SkSwiperItem v-for="(item, index) in images" :key="index">
<view
class="w-full h-full flex items-center justify-center text-white text-2xl font-bold"
:style="{ backgroundColor: item.color }"
>
{{ item.title }}
</view>
</SkSwiperItem>
</SkSwiper>

<view class="mt-4 text-center text-neutral">
当前页: {{ current + 1 }} / {{ images.length }}
</view>
</view>
</template>
26 changes: 26 additions & 0 deletions examples/uni/src/pages-basic/swiper/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
</script>

<template>
<view class="p-4 w-full">
<SkSwiper v-model="current" height="200px">
<SkSwiperItem v-for="(color, index) in colors" :key="index">
<view
class="w-full h-full flex items-center justify-center text-white text-2xl font-bold"
:style="{ backgroundColor: color }"
>
{{ index + 1 }}
</view>
</SkSwiperItem>
</SkSwiper>

<view class="mt-4 text-center text-neutral">
当前页: {{ current + 1 }} / {{ colors.length }}
</view>
</view>
</template>
80 changes: 80 additions & 0 deletions examples/uni/src/pages-basic/swiper/controlled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']

const goToPrev = () => {
if (current.value > 0) {
current.value--
}
}

const goToNext = () => {
if (current.value < colors.length - 1) {
current.value++
}
}

const goToPage = (index: number) => {
current.value = index
}
</script>

<template>
<view class="p-4 w-full">
<view class="mb-4">
<view class="text-lg font-bold mb-2">
受控模式
</view>
<view class="text-sm text-neutral-dim">
通过按钮或其他方式控制轮播
</view>
</view>

<SkSwiper
v-model="current"
indicator-type="fraction"
height="200px"
>
<SkSwiperItem v-for="(color, index) in colors" :key="index">
<view
class="w-full h-full flex items-center justify-center text-white text-2xl font-bold"
:style="{ backgroundColor: color }"
>
{{ index + 1 }}
</view>
</SkSwiperItem>
</SkSwiper>

<!-- 控制按钮 -->
<view class="mt-4 flex gap-2 justify-center">
<SkButton
:disabled="current === 0"
@click="goToPrev"
>
上一页
</SkButton>
<SkButton
:disabled="current === colors.length - 1"
@click="goToNext"
>
下一页
</SkButton>
</view>

<!-- 页码按钮 -->
<view class="mt-4 flex gap-2 justify-center flex-wrap">
<SkButton
v-for="(_, index) in colors"
:key="index"
:variant="current === index ? 'solid' : 'bound'"
size="small"
@click="goToPage(index)"
>
{{ index + 1 }}
</SkButton>
</view>
</view>
</template>
151 changes: 151 additions & 0 deletions examples/uni/src/pages-basic/swiper/custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const products = [
{
id: 1,
name: '产品 A',
price: '¥299',
color: '#3b82f6',
desc: '高品质产品',
},
{
id: 2,
name: '产品 B',
price: '¥399',
color: '#10b981',
desc: '热销推荐',
},
{
id: 3,
name: '产品 C',
price: '¥499',
color: '#f59e0b',
desc: '限时优惠',
},
{
id: 4,
name: '产品 D',
price: '¥599',
color: '#ef4444',
desc: '新品上市',
},
]
</script>

<template>
<view class="p-4 w-full space-y-6">
<!-- 自定义圆角 -->
<view>
<view class="text-lg font-bold mb-2">
大圆角样式
</view>
<SkSwiper
v-model="current"
:autoplay="true"
:interval="3000"
radius="large"
height="200px"
>
<SkSwiperItem v-for="item in products" :key="item.id">
<view
class="w-full h-full flex flex-col items-center justify-center text-white"
:style="{ backgroundColor: item.color }"
>
<view class="text-2xl font-bold mb-2">
{{ item.name }}
</view>
<view class="text-xl">
{{ item.price }}
</view>
<view class="text-sm opacity-80 mt-1">
{{ item.desc }}
</view>
</view>
</SkSwiperItem>
</SkSwiper>
</view>

<!-- 自定义指示器颜色 -->
<view>
<view class="text-lg font-bold mb-2">
自定义指示器颜色
</view>
<SkSwiper
:autoplay="true"
:interval="3000"
indicator-color="rgba(255, 255, 255, 0.5)"
indicator-active-color="#ffffff"
height="200px"
>
<SkSwiperItem v-for="item in products" :key="item.id">
<view
class="w-full h-full flex flex-col items-center justify-center text-white"
:style="{ backgroundColor: item.color }"
>
<view class="text-2xl font-bold">
{{ item.name }}
</view>
</view>
</SkSwiperItem>
</SkSwiper>
</view>

<!-- 自定义高度 -->
<view>
<view class="text-lg font-bold mb-2">
自定义高度（300px）
</view>
<SkSwiper
:autoplay="true"
:interval="3000"
indicator-type="fraction"
height="300px"
>
<SkSwiperItem v-for="item in products" :key="item.id">
<view
class="w-full h-full flex flex-col items-center justify-center text-white p-6"
:style="{ backgroundColor: item.color }"
>
<view class="text-3xl font-bold mb-4">
{{ item.name }}
</view>
<view class="text-2xl mb-2">
{{ item.price }}
</view>
<view class="text-base opacity-90">
{{ item.desc }}
</view>
<view class="mt-4 px-6 py-2 bg-white/20 rounded-full">
查看详情
</view>
</view>
</SkSwiperItem>
</SkSwiper>
</view>

<!-- 指示器位置 - 顶部 -->
<view>
<view class="text-lg font-bold mb-2">
指示器在顶部
</view>
<SkSwiper
:autoplay="true"
:interval="3000"
indicator-position="top"
height="200px"
>
<SkSwiperItem v-for="item in products" :key="item.id">
<view
class="w-full h-full flex items-center justify-center text-white text-xl font-bold"
:style="{ backgroundColor: item.color }"
>
{{ item.name }}
</view>
</SkSwiperItem>
</SkSwiper>
</view>
</view>
</template>
Loading