@tanzhenxing/zx-carousel-item NPM

zx-carousel-item 走马灯项组件

介绍

zx-carousel-item 是走马灯的子组件，用于包装轮播内容。它必须作为 zx-carousel 组件的子组件使用。

引入

<zx-carousel-item></zx-carousel-item>

代码演示

基础用法

<zx-carousel>
  <zx-carousel-item v-for="item in 4" :key="item">
    <view class="content">{{ item }}</view>
  </zx-carousel-item>
</zx-carousel>

图片轮播

<zx-carousel>
  <zx-carousel-item 
    v-for="(item, index) in imageList" 
    :key="index"
    :src="item.url"
    :name="item.id"
  />
</zx-carousel>

卡片模式

<zx-carousel type="card">
  <zx-carousel-item 
    v-for="(item, index) in dataList" 
    :key="index"
    :name="item.id"
    :label="item.title"
  >
    <view class="custom-card">
      <image class="card-image" :src="item.imageUrl" mode="aspectFill" />
      <view class="card-title">{{ item.title }}</view>
    </view>
  </zx-carousel-item>
</zx-carousel>

API

Props

参数	说明	类型	默认值
name	幻灯片的名字，可用作 setActiveItem 的参数	string	''
label	该幻灯片所对应指示器的文本	string / number	''
src	图片链接	string	''
type	内容类型	string	'custom'
imageMode	图片的裁剪模式	string	'aspectFill'
lazyLoad	是否开启懒加载	boolean	true
customStyle	自定义样式	string / object	''

Events

事件名	说明	回调参数
click	点击幻灯片时触发	{ name, label, src }
imageLoad	图片加载成功时触发	event
imageError	图片加载失败时触发	event

插槽

名称	说明
default	自定义幻灯片内容

注意事项

zx-carousel-item 必须作为 zx-carousel 的子组件使用
当设置 src 属性时，组件会默认显示图片内容
如需自定义内容，请使用默认插槽
当 type 设置为 'card' 时，会启用卡片样式

carousel-item 轮播图轮播图组件轮播图组件轮播图组件

@tanzhenxing/zxui @tanzhenxing/zx-carousel

1.0.3

1 month ago

1.0.2

2 months ago

1.0.1

2 months ago