Swiper 轮播图

功能丰富的轮播图组件，支持自动播放、卡片式轮播、自定义指示器位置等多种特性。

代码示例

				
<template>
	<zk-theme type="page" padding="20" showBack navbarTitle="轮播图">
		<view class="demo-title">

			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
		</view>
		<zk-swiper :list="list" @click="onClick" />

		<view class="demo-title">

			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="卡片式轮播(不支持nvue)" />
		</view>
		<zk-swiper :list="list" type="card" :height="250" :card-scale="0.95" :duration="300" :interval="4000" />

		<view class="demo-title">

			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="显示标题" />
		</view>
		<zk-swiper :list="list" :show-title="true" />

		<view class="demo-title">

			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义指示器位置(右侧)" />
		</view>


		<zk-swiper :list="list" indicator-position="bottom-right" />


		<view class="demo-title">

			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义指示器位置(左侧)" />
		</view>


		<zk-swiper :list="list" indicator-position="bottom-left" />



		<view class="demo-title">

			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义指示器颜色" />
		</view>
		<zk-swiper :list="list" indicator-active-color="#FF0000" indicator-inactive-color="rgba(255, 0, 0, 0.3)" />
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'http://demo.zenkuai.com/attachment/demo/s1.jpg',
						title: '标题1'
					},
					{
						image: 'http://demo.zenkuai.com/attachment/demo/s2.jpg',
						title: '标题2'
					},
					{
						image: 'http://demo.zenkuai.com/attachment/demo/s3.jpg',
						title: '标题3'
					}
				]
			}
		},
		methods: {
			onClick(e) {
				console.log('点击轮播图', e)
			}
		}
	}
</script>

<style lang="scss">
	.demo-title {
		margin-top: 30rpx;
		margin-right: 0;
		margin-bottom: 16rpx;
		margin-left: 0;


		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */

		&:first-child {
			margin-top: 0;
		}

		&__text {
			font-size: 28rpx;
			color: #909399;
			/* #ifdef APP-NVUE */
			lines: 1;
			/* #endif */
		}
	}
</style>

API

Props 属性

参数 说明 类型 默认值
list 轮播图数据列表，支持字符串数组或对象数组 Array<string | object> []
height 轮播图高度，单位rpx string / number 300
autoplay 是否自动播放 boolean true
interval 自动轮播时间间隔，单位ms number 3000
duration 滑动动画时长，单位ms number 300
circular 是否循环播放 boolean true
img-mode 图片裁剪模式 string aspectFill
indicator 是否显示指示器 boolean true
indicator-position 指示器位置 string bottom-center
indicator-active-color 指示器激活色 string #FFFFFF
indicator-inactive-color 指示器非激活色 string rgba(255, 255, 255, 0.3)
show-title 是否显示标题 boolean false
radius 圆角值，单位rpx string / number 8
type 轮播图类型，可选值：default / card string default
card-scale 卡片式缩放比例 number 0.83

Events 事件

事件名 说明 回调参数
change 轮播图切换时触发 (index: number)
click 点击轮播图时触发 (index: number)
animationfinish 动画结束时触发 { current: number, item: object }

数据结构说明

// 支持以下数据格式：
list: [
    'https://example.com/image1.jpg',  // 直接使用图片地址
    {
        image: 'https://example.com/image2.jpg',  // 图片地址
        title: '标题文字'  // 可选的标题
    }
]