fs-uni-template/components/fs-swiper/fs-swiper.vue

<template>
	<swiper
		:current="current"
		:indicator-dots="indicatorDots"
		:indicator-color="indicatorColor"
		:indicator-active-color="indicatorActiveColor"
		:autoplay="autoplay"
		:interval="interval"
		:duration="duration"
		:circular="circular"
		:vertical="vertical"
		:previous-margin="previousMargin"
		:next-margin="nextMargin"
		@change="handleChange"
		@transition="handleTransition"
		class="fs-swiper"
		:class="{ 'fs-swiper-card': mode === 'card', 'gutter-v': gutter }"
		:style="{ height: height }"
	>
		<template v-if="mode === 'card'">
			<swiper-item class="fs-swiper-item-box" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
				<view class="fs-swiper-item" :class="{ 'card-cur': index === curIndex }">
					<fs-avatar shape="square" radius width="100%" height="100%" :src="item[keyMap.src]"></fs-avatar>
					<view class="fs-swiper-item-text line1" v-if="showTitle">{{ item[keyMap.title] }}</view>
				</view>
			</swiper-item>
		</template>
		<template v-else>
			<swiper-item class="fs-swiper-item-box" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
				<view class="fs-swiper-item">
					<fs-avatar shape="square" width="100%" height="100%" :src="item[keyMap.src]"></fs-avatar>
					<view class="fs-swiper-item-text line1" v-if="showTitle">{{ item[keyMap.title] }}</view>
				</view>
			</swiper-item>
		</template>
	</swiper>
</template>

<script>
/**
 * 轮播图组件
 * @description 轮播图组件
 * @property {Array} list 滚动列表
 * @property {Object} keyMap 属性映射
 * @property {Number} current 当前所在滑块的index
 * @property {Boolean} indicatorDots 是否显示指示器
 * @property {String} indicatorColor 指示器颜色
 * @property {String} indicatorActiveColor 指示器高亮颜色
 * @property {Boolean} autoplay 自动播放
 * @property {Boolean} vertical 竖直滚动
 * @property {Number} interval 播放间隔时长(单位ms)
 * @property {Number} duration 滚动动画持续时长(单位ms)
 * @property {String} previousMargin 前边距，可用于露出前一项的一小部分
 * @property {String} nextMargin 后边距，可用于露出后一项的一小部分
 * @property {String} height 滚动项高度
 * @property {String} mode 模式
 * @property {Boolean} gutter 是否有下边距
 * @property {Boolean} showTitle 是否显示标题
 * @event {Function} change change事件
 * @event {Function} transition transition事件
 */
export default {
	name: 'fs-swiper'
}
</script>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	current: {
		type: Number,
		default: 0
	},
	indicatorDots: {
		type: Boolean,
		default: true
	},
	indicatorColor: {
		type: String,
		default: 'rgba(0, 0, 0, .3)'
	},
	indicatorActiveColor: {
		type: String,
		default: '#fff'
	},
	autoplay: {
		type: Boolean,
		default: true
	},
	circular: {
		type: Boolean,
		default: true
	},
	interval: {
		type: Number,
		default: 3000
	},
	duration: {
		type: Number,
		default: 1000
	},
	vertical: {
		type: Boolean,
		default: false
	},
	previousMargin: {
		type: String,
		default: '0'
	},
	nextMargin: {
		type: String,
		default: '0'
	},
	height: {
		type: String,
		default: '350rpx'
	},
	list: {
		type: Array,
		default() {
			return []
		}
	},
	keyMap: {
		type: Object,
		default() {
			return {
				src: 'src',
				title: 'title'
			}
		}
	},
	mode: {
		type: String
	},
	gutter: Boolean,
	showTitle: Boolean
})
const emits = defineEmits(['change', 'click', 'transition'])

let curIndex = ref(0)
const handleChange = e => {
	curIndex.value = e.detail.current
	emits('change', e)
}
const handleTransition = e => {
	emits('transition', e)
}
const handleClick = item => {
	emits('click', item)
}
</script>

<style lang="scss" scoped>
.fs-swiper {
	&-item {
		width: 100%;
		height: 100%;

		&-text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			padding: 10rpx 20rpx;
			font-size: 14px;
			z-index: 10;
		}
	}
}

.fs-swiper-card {
	.fs-swiper-item-box {
		width: 610rpx !important;
		left: 70rpx;
		position: relative;
	}
	.fs-swiper-item {
		transform: scale(0.9);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}
	.card-cur {
		transform: scale(1);
	}
}
</style>