介绍
滑动切换视图容器,可运用于banner轮播图等场景。
引入
ts
import Swiper from 'sard-uniapp/components/swiper/swiper.vue'代码演示
基础使用
使用 list 属性传入轮播数据,支持字符串和对象两种格式。当传入字符串时,组件会将其作为图片地址进行渲染;当传入对象时,可以通过 image、title、video 和 poster 属性分别指定图片地址、标题文本、视频地址和视频封面地址。
vue
<template>
<sar-swiper :list="list" @change="onChange"></sar-swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg',
])
const onChange = (index: number) => {
console.log('change', index)
}
</script>vue
<template>
<sar-swiper :list="list" @change="onChange"></sar-swiper>
</template>
<script setup lang="js">
import { ref } from "vue";
const list = ref([
"https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg"
]);
const onChange = (index) => {
console.log("change", index);
};
</script>指示点类型
使用 dot-type 属性可以设置指示点的类型。
vue
<template>
<sar-swiper :list="list" dot-type="fraction"></sar-swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg',
])
</script>vue
<template>
<sar-swiper :list="list" dot-type="fraction"></sar-swiper>
</template>
<script setup lang="js">
import { ref } from "vue";
const list = ref([
"https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg"
]);
</script>标题类型
使用 dot-type 属性设置为 title 时,可以在指示点上显示标题文本。
vue
<template>
<sar-swiper :list="list" dot-type="title"></sar-swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
{
image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
title: '老夫聊发少年狂,左牵黄,右擎苍,锦帽貂裘,千骑卷平冈。',
},
{
image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg',
title: '为报倾城随太守,亲射虎,看孙郎。',
},
{
image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg',
title:
'酒酣胸胆尚开张。鬓微霜,又何妨!持节云中,何日遣冯唐?会挽雕弓如满月,西北望,射天狼。',
},
])
</script>vue
<template>
<sar-swiper :list="list" dot-type="title"></sar-swiper>
</template>
<script setup lang="js">
import { ref } from "vue";
const list = ref([
{
image: "https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg",
title: "\u8001\u592B\u804A\u53D1\u5C11\u5E74\u72C2\uFF0C\u5DE6\u7275\u9EC4\uFF0C\u53F3\u64CE\u82CD\uFF0C\u9526\u5E3D\u8C82\u88D8\uFF0C\u5343\u9A91\u5377\u5E73\u5188\u3002"
},
{
image: "https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg",
title: "\u4E3A\u62A5\u503E\u57CE\u968F\u592A\u5B88\uFF0C\u4EB2\u5C04\u864E\uFF0C\u770B\u5B59\u90CE\u3002"
},
{
image: "https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg",
title: "\u9152\u9163\u80F8\u80C6\u5C1A\u5F00\u5F20\u3002\u9B13\u5FAE\u971C\uFF0C\u53C8\u4F55\u59A8\uFF01\u6301\u8282\u4E91\u4E2D\uFF0C\u4F55\u65E5\u9063\u51AF\u5510\uFF1F\u4F1A\u633D\u96D5\u5F13\u5982\u6EE1\u6708\uFF0C\u897F\u5317\u671B\uFF0C\u5C04\u5929\u72FC\u3002"
}
]);
</script>嵌入视频
使用 video 属性可以在轮播中嵌入视频,并通过 poster 属性设置视频封面。切换到视频时会自动播放,切换离开时会自动暂停。
vue
<template>
<sar-swiper :list="list" dot-type="dot"></sar-swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
{
image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
},
{
video: 'https://fastly.jsdelivr.net/npm/@sard/assets/video/video1.mp4',
poster: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg',
},
{
image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg',
},
])
</script>vue
<template>
<sar-swiper :list="list" dot-type="dot"></sar-swiper>
</template>
<script setup lang="js">
import { ref } from "vue";
const list = ref([
{
image: "https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg"
},
{
video: "https://fastly.jsdelivr.net/npm/@sard/assets/video/video1.mp4",
poster: "https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg"
},
{
image: "https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg"
}
]);
</script>多项展示
使用 display-multiple-items 属性可以设置同时展示的滑块数量。
vue
<template>
<sar-swiper
:list="list"
:display-multiple-items="3"
item-style="margin: 0 5px"
></sar-swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat3.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat4.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat5.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat6.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat7.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat8.jpg',
])
</script>vue
<template>
<sar-swiper
:list="list"
:display-multiple-items="3"
item-style="margin: 0 5px"
></sar-swiper>
</template>
<script setup lang="js">
import { ref } from "vue";
const list = ref([
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat3.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat4.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat5.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat6.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat7.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat8.jpg"
]);
</script>缩放效果
通过 dynamic-item-style 属性可以为滑块设置动态样式,实现缩放等效果。使用 previous-margin 和 next-margin 属性可以设置前后滑块的边距,配合缩放效果可以实现更好的视觉效果。
vue
<template>
<sar-swiper
:list="list"
previous-margin="120rpx"
next-margin="120rpx"
:dynamic-item-style="dynamicItemStyle"
></sar-swiper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const dynamicItemStyle = (index: number, activeIndex: number) => {
return {
transform: index === activeIndex ? 'scale(1)' : 'scale(0.8)',
transition: 'transform 0.3s',
borderRadius: '16rpx',
overflow: 'hidden',
}
}
const list = ref([
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat3.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat4.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat5.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat6.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat7.jpg',
'https://fastly.jsdelivr.net/npm/@sard/assets/images/cat8.jpg',
])
</script>vue
<template>
<sar-swiper
:list="list"
previous-margin="120rpx"
next-margin="120rpx"
:dynamic-item-style="dynamicItemStyle"
></sar-swiper>
</template>
<script setup lang="js">
import { ref } from "vue";
const dynamicItemStyle = (index, activeIndex) => {
return {
transform: index === activeIndex ? "scale(1)" : "scale(0.8)",
transition: "transform 0.3s",
borderRadius: "16rpx",
overflow: "hidden"
};
};
const list = ref([
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat1.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat2.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat3.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat4.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat5.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat6.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat7.jpg",
"https://fastly.jsdelivr.net/npm/@sard/assets/images/cat8.jpg"
]);
</script>API
SwiperProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| model-value | 当前滑块的下标 | number | 0 |
| list | 滑块列表数据 | (string | SwiperItem)[] | [] |
| show-dot | 是否显示指示点 | boolean | true |
| dot-type | 指示点类型 | 'dot' | 'dot-bar' | 'index' | 'title' | 'fraction' | 'dot' |
| autoplay | 是否自动播放 | boolean | true |
| interval | 自动播放间隔时间 | number | 5000 |
| duration | 滑动动画时长 | number | 500 |
| circular | 是否启用循环 | boolean | false |
| previous-margin | 前边距 | string | '0px' |
| next-margin | 后边距 | string | '0px' |
| display-multiple-items | 同时展示的滑块数量 | number | 1 |
| swiper-item-style | 滑块样式 | StyleValue | - |
| item-style | 滑块内元素样式 | StyleValue | - |
| dynamic-item-style | 动态滑块内元素样式 | (index: number, activeIndex: number) => StyleValue | - |
SwiperItem
| 属性 | 描述 | 类型 |
|---|---|---|
| image | 图片地址 | string |
| title | 标题文本 | string |
| video | 视频地址 | string |
| poster | 视频封面地址 | string |
SwiperEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| click | 点击滑块时触发 | (index: number) => void |
| update:model-value | 滑块切换时触发 | (index: number) => void |
| change | 滑块切换时触发 | (index: number) => void |
主题定制
CSS 变量
scss
// #variables
page,
.sar-portal {
--sar-swiper-height: 300rpx;
}
// #endvariables