Skip to content
12:13

图鸟UI vue3 uniapp 插件 - 堆叠轮播

该组件一般用户暂时多张堆叠在一起的轮播场景

仓库地址

Github

npmjs

安装方式

bash
npm i tnuiv3p-tn-stack-swiper
npm i tnuiv3p-tn-stack-swiper
bash
pnpm add tnuiv3p-tn-stack-swiper
pnpm add tnuiv3p-tn-stack-swiper
bash
yarn i tnuiv3p-tn-stack-swiper
yarn i tnuiv3p-tn-stack-swiper

组件位置

typescript
import TnStackSwiper from 'tnuiv3p-tn-stack-swiper/index.vue'
import TnStackSwiperItem from 'tnuiv3p-tn-stack-swiper/item.vue'
import TnStackSwiper from 'tnuiv3p-tn-stack-swiper/index.vue'
import TnStackSwiperItem from 'tnuiv3p-tn-stack-swiper/item.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

基础使用

  • 通过v-model \ model-value来绑定当前选中item的索引值,如果没有设置则默认为0
  • TnStackSwiper组件内部使用TnStackSwiperItem组件来包裹每一个item
vue
<script setup lang="ts">
import TnStackSwiper from 'tnuiv3p-tn-stack-swiper/index.vue'
import TnStackSwiperItem from 'tnuiv3p-tn-stack-swiper/item.vue'
</script>

<template>
  <view class="content">
    <view class="swiper">
      <TnStackSwiper>
        <TnStackSwiperItem>
          <view class="swiper-item tn-bluepurple_bg">1</view>
        </TnStackSwiperItem>
        <TnStackSwiperItem>
          <view class="swiper-item tn-aquablue_bg">2</view>
        </TnStackSwiperItem>
        <TnStackSwiperItem>
          <view class="swiper-item tn-blue_bg">3</view>
        </TnStackSwiperItem>
        <TnStackSwiperItem>
          <view class="swiper-item tn-cyan_bg">4</view>
        </TnStackSwiperItem>
      </TnStackSwiper>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  padding: 30rpx;

  .swiper {
    position: relative;
    width: 100%;
    height: 400rpx;

    .swiper-item {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50rpx;
      color: #fff;
    }
  }
}
</style>
<script setup lang="ts">
import TnStackSwiper from 'tnuiv3p-tn-stack-swiper/index.vue'
import TnStackSwiperItem from 'tnuiv3p-tn-stack-swiper/item.vue'
</script>

<template>
  <view class="content">
    <view class="swiper">
      <TnStackSwiper>
        <TnStackSwiperItem>
          <view class="swiper-item tn-bluepurple_bg">1</view>
        </TnStackSwiperItem>
        <TnStackSwiperItem>
          <view class="swiper-item tn-aquablue_bg">2</view>
        </TnStackSwiperItem>
        <TnStackSwiperItem>
          <view class="swiper-item tn-blue_bg">3</view>
        </TnStackSwiperItem>
        <TnStackSwiperItem>
          <view class="swiper-item tn-cyan_bg">4</view>
        </TnStackSwiperItem>
      </TnStackSwiper>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  padding: 30rpx;

  .swiper {
    position: relative;
    width: 100%;
    height: 400rpx;

    .swiper-item {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50rpx;
      color: #fff;
    }
  }
}
</style>

修改轮播宽高

默认轮播的宽高为父容器的宽高,如果需要修改轮播的宽高,可以通过width \ height来设置

vue
<template>
  <TnStackSwiper width="80vw" height="400">
    <TnStackSwiperItem>
      <view class="swiper-item tn-bluepurple_bg">1</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-aquablue_bg">2</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-blue_bg">3</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-cyan_bg">4</view>
    </TnStackSwiperItem>
  </TnStackSwiper>
</template>
<template>
  <TnStackSwiper width="80vw" height="400">
    <TnStackSwiperItem>
      <view class="swiper-item tn-bluepurple_bg">1</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-aquablue_bg">2</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-blue_bg">3</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-cyan_bg">4</view>
    </TnStackSwiperItem>
  </TnStackSwiper>
</template>

修改堆叠轮播的切换方向

默认堆叠轮播的切换方向为horizontal,如果需要修改堆叠轮播的切换方向,可以通过slider-direction来设置

vue
<template>
  <TnStackSwiper slide-direction="vertical">
    <TnStackSwiperItem>
      <view class="swiper-item tn-bluepurple_bg">1</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-aquablue_bg">2</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-blue_bg">3</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-cyan_bg">4</view>
    </TnStackSwiperItem>
  </TnStackSwiper>
</template>
<template>
  <TnStackSwiper slide-direction="vertical">
    <TnStackSwiperItem>
      <view class="swiper-item tn-bluepurple_bg">1</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-aquablue_bg">2</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-blue_bg">3</view>
    </TnStackSwiperItem>
    <TnStackSwiperItem>
      <view class="swiper-item tn-cyan_bg">4</view>
    </TnStackSwiperItem>
  </TnStackSwiper>
</template>

API

TnStackSwiperProps

属性名说明类型默认值可选值
v-model/model-value当前轮播对应激活的itemindex索引值Number0-
width容器的宽度,默认单位rpxString100%-
height容器的高度,默认单位rpxString100%-
autoplay是否自动切换轮播Booleanfalsetrue
interval轮播切换时间Number5000-
switch-rate滑动切换移动比例, 0 ~ 1Number0.13-
scale-rateitem之间的缩放比例, 0 ~ 1Number0.08-
opacity-rateitem之间的透明度, 0 ~ 1Number0.18-
slide-direction轮播滑动方向Stringhorizontalvertical

TnStackSwiperEmits

事件名说明类型
change轮播切换时触发(index: number) => void
click轮播点击事件(index: number) => void

Tuniao UI