更新记录

1.0.0（2024-08-18） 下载此版本

初始发布

1.0.0 （2024-08-16）

平台兼容性

uni-app

其他

SY-StackedCarousel

该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：

• 3D 轮播图效果，满足不同的开发需求
• 可配置显示标题，涵盖不同的应用场景
• 功能属性齐全丰富
• 轻量级，支持小程序、H5 等平台（支持 vue2、vue3）

使用方式

<template>
  <view class="container">
    <SYStackedCarousel
      height="480rpx"
      autoplay
      :images="images"
      :current="3"
      :interval="2000"
      @click="clickHandler"
      @change="changeHandler"
    >
    </SYStackedCarousel>
  </view>
</template>

<script>
  import SYStackedCarousel from "@/uni_modules/SY-StackedCarousel/components/SY-StackedCarousel.vue";
  export default {
    components: {
      SYStackedCarousel,
    },
    data() {
      return {
        images: [
          {
            url: "../../static/images/1.jpg",
            desc: "星辰大海任我行，风雨兼程志更坚。星辰大海任我行，风雨兼程志更坚。星辰大海任我行，风雨兼程志更坚。星辰大海任我行，风雨兼程志更坚。",
          },
          {
            url: "../../static/images/2.jpg",
            desc: "晨曦微露破晓时，梦想起航正当时。",
          },
          {
            url: "../../static/images/3.jpg",
            desc: "千锤百炼钢更强，逆境之中显真章。",
          },
          {
            url: "../../static/images/4.jpg",
            desc: "心有猛虎细嗅蔷薇，勇者无畏亦柔情。",
          },
          {
            url: "../../static/images/5.jpg",
            desc: "高山仰止景行行，志士仁人共长天。",
          },
        ],
      };
    },
    onLoad() {},
    methods: {
      clickHandler(item, index) {
        console.log("item: ", item);
        console.log("index: ", index);
      },
      changeHandler(index) {
        console.log("当前触发change事件，返回索引: ", index);
      },
    },
  };
</script>

属性说明

事件说明

插槽