PIUI 高质量开源组件库

# Swiper 轮播

此组件适用于各类网站的导航轮播，广告演示等场景

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
√ √ √ √ √ √ √

# 基本用法

通过 list 传入一组图片路径，实现图片轮播效果.

# 默认设置

默认情况下，高度是自动撑开的

<pi-swiper :imgs="demo1.imgs" />
1

# 3D效果

img-mode 需设置成 aspectFill 定高，且开启 effect3d 3d效果

<pi-swiper height="400" img-mode="aspectFill" :imgs="demo2.imgs" effect3d />
1

# 指示点

indicator-type 设置指示器类型(圆点),(矩形).

indicator-position 设置指示器位置.

<template>
  <pi-swiper
    height="400"
    img-mode="aspectFill"
    indicator-type="dot"
    indicator-position="bc"
    indicator-active-color="red"
    :imgs="demo2.imgs"
  />
  <pi-swiper
    height="400"
    img-mode="aspectFill"
    indicator-type="rect"
    indicator-position="tc"
    :imgs="demo2.imgs"
  />
  <pi-swiper
    height="400"
    img-mode="aspectFill"
    indicator-type="rect"
    :imgs="demo2.imgs"
  />
</template>

<script>
export default {
  name: 'Swiper',
  data() {
    return {
      demo1: {
        imgs: [
          'https://images3.alphacoders.com/813/thumb-350-81317.jpg',
          'https://images4.alphacoders.com/441/thumb-350-44158.jpg',
          'https://images5.alphacoders.com/489/thumb-350-489030.jpg'
        ]
      },
      demo2: {
        imgs: [
          'https://images3.alphacoders.com/813/thumb-350-81317.jpg',
          'https://images4.alphacoders.com/441/thumb-350-44158.jpg',
          'https://images5.alphacoders.com/489/thumb-350-489030.jpg'
        ]
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 指定imgField

设置img-field指定传入的imgs对象数组字段

<template>
  <pi-swiper
    height="400"
    img-mode="aspectFill"
    indicator-type="rect"
    img-field="pic"
    :imgs="demo3.imgs"
  />
</template>

<script>
  export default {
    name: 'Swiper',
    data() {
      return {
        demo3: {
          imgs: [
            { pic: 'https://picfiles.alphacoders.com/430/thumb-430814.jpg' },
            { pic: 'https://picfiles.alphacoders.com/425/thumb-425129.jpg' },
            { pic: 'https://picfiles.alphacoders.com/424/thumb-424428.jpg' }
          ]
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# API

# Props

名称 描述 类型 必选 默认值
value 显示第几项 String/Number false 0
customStyle 自定义样式，对象形式 Object false {}
customClass 自定义样式类，字符串形式 String false ''
imgs 选项列表 Array false []
imgField 指定传入的imgs对象数组字段
如果imgs传的是字符串数组, imgField传空，如果imgs传的是对象数组，imgField传对象中的键		 String false ''
height 轮播图的高度 String/Number false 'auto'
imgMode 图片的裁剪模式，详见image组件裁剪模式，可选值'widthFix', 'heightFix', 'aspectFill', 'aspectFit', 'scaleToFill' String false 'widthFix'
bgColor 背景颜色 String false 'transparent'
indicatorType 指示器模式 'rect' / 'dot' / 'number' / 'none' String false 'number'
indicatorPosition 指示器的位置,可用值 'tl'左上角 'tc'上中 'tr'右上角 'bl'左下角 'bc'下中 'br'右下角 String false 'br'
indicatorActiveColor 指示器激活颜色，不设置默认为主题色 String false ''
effect3d 是否开启3d效果 Boolean false false
effect3dPreviousMargin effect3d = true的情况下，激活项与前后项之间的距离，单位rpx String/Number false 50
autoplay 是否自动播放 Boolean false true
interval 自动轮播时间间隔，单位ms String/Number false 3000
circular 是否循环播放 Boolean false true
duration 切换一张轮播图所需的时间，单位ms String/Number false 500
borderRadius 轮播图圆角值，单位rpx String/Number false 8
imgStyle 图片自定义样式，对象形式 Object false {}
titleStyle 标题自定义样式，对象形式 Object false {}

# Events

事件名 描述 参数
click 点击时触发 index, 当前页的索引

# Slots

名称 描述 插槽内容
img 每一张页面的插槽 index, img, value
Last updated: 2022/12/12 上午9:58:28

← Icon 图标 →

10:44