Fusions

Appearance

Swiper 轮播图 ​

iPhone

此组件一般用于导航轮播，广告展示等场景，如下特点：

  • 自定义指示器模式，可配置指示器样式，可以控制指示器是否显示，以及位置
  • 3D 轮播图效果，满足不同的开发场景
  • 可配置显示标题，覆盖不能的应用场景
  • 具有设置加载状态和嵌入视频的能力

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

通过 list 属性传入轮播图列表值，此值为一个数组，元素为对象，如下：

  • list 的 image 属性为轮播图的图片路径
  • list 的 title 属性为需要显示的标题

说明：特殊情况下

  1. 您从服务器获取的数据，里面的数组对于图片的属性名不一定为 image，如果让您再遍历修改为 image 属性，显然是不合理的，所以 fusions-ui 提供了一个 keyName 属性，比如您数组中的图片属性名为 img，您可以通过 fu-swiper 组件的 keyName 属性设置为 img 值。
  2. 您也可以直接传递一个元素图片的路径的数组给 list 属性
html
<template>
    <fu-swiper :list="list" keyName="img" @change="handleChange" @click="handleClick"></fu-swiper>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    // const list = reactive([
    //     '1.jpg',
    //     '2.jpg',
    //     '3.jpg'
    // ]);

    const list = reactive([
        {
            img: '1.jpg',
            title: '标题1'
        },
        {
            img: '2.jpg',
            title: '标题2'
        },
        {
            img: '3.jpg',
            title: '标题3'
        }
    ]);
</script>

指示器模式 ​

此组件内置了多种指示器，通过设置 mode 属性即可，可选值：

  • rect 指示器为方块状
  • round 激活的指示器为块状，未激活的未点状，为默认值
  • dot 指示器为圆点
  • number 指示器为数字

通过 indicatorPosition 属性设置指示器的位置，有如下值：

  • topLeft 指示器位于左上角
  • topCenter 指示器位于上方中间位置
  • topRight 指示器位于右上角
  • bottomLeft 指示器位于左下角
  • bottomCenter 指示器位于底部中间位置，为默认值
  • bottomRight 指示器位于右下角
html
<fu-swiper :list="list" mode="dot" indicatorPosition="bottomRight"></fu-swiper>

设置加载中 ​

通过 loading 属性设置加载中的状态，例如：

您可以动态的来控制加载状态，比如：:loading="loading"

html
<fu-swiper :list="list" loading></fu-swiper>

设置嵌入视频 ​

在一些场景下，需要嵌入视频，我们提供了嵌入视频的能力，为了避免浪费资源，在您切换轮播的时候视频会停止播放，您可以设置 poster 指定视频封面，示例：

html
<template>
    <fu-swiper :list="list" keyName="url" :autoplay="false"></fu-swiper>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const list = reactive([
        {
            url: "",
            title: "",
            poster: ""
        },
        {
            url: "",
            title: ""
        },
        {
            url: "",
            title: ""
        }
    ]);
</script>

设置指定类型 ​

默认情况下会根据链接字段判断 swiper-item 类型，但在极端情况下可能会不准确，所以我们提供了指定 item 的类型，通过设置 type 为 video 或 image 来指定类型即可，示例：

html
<template>
    <fu-swiper :list="list" keyName="url" :autoplay="false"></fu-swiper>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const list = reactive([
        {
            url: "",
            title: "",
            poster: "",
            type: "video"
        },
        {
            url: "",
            title: "",
            type: "image"
        },
        {
            url: "",
            title: ""
        }
    ]);
</script>

设置开启 3D 效果 ​

设置 effect3D 为 true 即可，此效果左右两边可以缩略形式预览前后一个 swiper-item 的一部分，效果更加生动。

html
<fu-swiper :list="list" :effect3D="true"></fu-swiper>

控制轮播图效果 ​

  • autoplay 属性控制是否自动轮播，默认为 true
  • interval 属性控制轮播间隔时间，单位为 ms，默认为 3000
  • duration 属性控制动画时长，单位为 ms，默认为 500
  • circular 属性控制是否循环播放，默认为 true
html
<fu-swiper :list="list" :autoplay="false" interval="2000" duration="3000" :circular="false"></fu-swiper>

API ​

Swiper Props ​

属性名说明类型默认值可选值
list轮播图数据，详见上方基础用法Array--
radius轮播图圆角String｜Number5-
current当前轮播图索引，默认显示第几项Number0-
height轮播图高度，单位为 pxString｜Number125-
bgColor轮播图背景颜色Stringtransparent-
keyName图片的属性名Stringimage-
showTitle是否显示标题Booleanfalse-
keyTitle标题的属性名Stringtitle-
titleStyle标题样式Object--
mode指示器模式，详见上方指示器模式Stringround-
indicator是否显示指示灯Booleanfalse-
indicatorPosition指示器位置，详见上方指示器模式StringbottomCenter-
effect3D是否开启 3D 效果Booleanfalse-
effect3DPreviousSpacing在3D缩放模式下，item之间的间隔String｜Number25-
autoplay是否自动轮播Booleantrue-
interval轮播间隔时间Number3000-
duration动画时长Number500-
circular是否循环播放Booleantrue-
imgMode图片裁剪模式StringaspectFill-

Swiper Events ​

事件名说明回调参数
click点击轮播图时触发() => void
change轮播图切换时触发() => void

Swiper Slot ​

名称说明
indicator自定义指示器