Skip to content

Banner 轮播图

参数

参数说明类型可选值默认值
modelValue / v-model当前选择下标number0
list列表array[]
type类型stringcard, chain
arrow切换箭头number0
margin外间距array[0, 0, 0, 0]
heightstring300rpx
radius圆角string10rpx
dotType指示点类型string#e9e9e9

示例

基本用法

html
<cl-banner :list="list"></cl-banner>

卡片

html
<cl-banner :list="list" type="card"></cl-banner>

衔接

html
<cl-banner :list="list" type="chain"></cl-banner>

插槽

  • item 为当前选中值
  • index 选中的序号
html
<cl-swiper v-model="active">
	<template #default="{ item, index }"> {{ index }} </template>
</cl-swiper>