Sard Uniapp

Appearance

在新窗口打开⤴

Swiper轮播图1.30+

介绍 ​

滑动切换视图容器，可运用于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当前滑块的下标number0
list滑块列表数据(string | SwiperItem)[][]
show-dot是否显示指示点booleantrue
dot-type指示点类型'dot' | 'dot-bar' | 'index' | 'title' | 'fraction''dot'
autoplay是否自动播放booleantrue
interval自动播放间隔时间number5000
duration滑动动画时长number500
circular是否启用循环booleanfalse
previous-margin前边距string'0px'
next-margin后边距string'0px'
display-multiple-items同时展示的滑块数量number1
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

Released under the MIT License.

Copyright © 2023-present wuzhitao