Tuniao UI Uniapp V3

Appearance

12:13

TnSwiper 轮播图 ​

该组件用于展示轮播信息

组件位置 ​

typescript
import TnSwiper from '@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue'
import TnSwiper from '@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue'
typescript
import TnSwiper from '@/uni_modules/tuniaoui-vue3/components/swiper/src/swiper.vue'
import TnSwiper from '@/uni_modules/tuniaoui-vue3/components/swiper/src/swiper.vue'

平台差异说明 ​

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

基础使用 ​

  • 通过v-model绑定当前选中选项卡的索引值

  • 通过data传递待显示的数据

    注意

    这里传递的数据会通过默认的插槽slot进行渲染，所以需要在slot中进行数据的渲染，默认插槽slot中的data参数为data数组中的每一项，active参数为当前项是否为选中项

  • 通过width设置轮播图的宽度，默认为100%，根据父容器的高度进行自适应

  • 通过height设置轮播图的高度，默认为100%，根据父容器的高度进行自适应

vue
<script lang="ts" setup>
import { ref } from 'vue'

const currentSwiperIndex = ref(0)

// 轮播图数据
const swiperData = [
  'https://resource.tuniaokj.com/images/xiongjie/x14.jpg',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new1.png',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg',
]
</script>

<template>
  <TnSwiper
    v-model="currentSwiperIndex"
    :data="swiperData"
    width="100%"
    height="420"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>

<style lang="scss">
.swiper-container {
  width: 100%;
  height: 420rpx;

  .swiper-data {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;

    .image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }
}
</style>
<script lang="ts" setup>
import { ref } from 'vue'

const currentSwiperIndex = ref(0)

// 轮播图数据
const swiperData = [
  'https://resource.tuniaokj.com/images/xiongjie/x14.jpg',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new1.png',
  'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg',
]
</script>

<template>
  <TnSwiper
    v-model="currentSwiperIndex"
    :data="swiperData"
    width="100%"
    height="420"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>

<style lang="scss">
.swiper-container {
  width: 100%;
  height: 420rpx;

  .swiper-data {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;

    .image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }
}
</style>

指示器 ​

  • 通过indicator参数来控制是否显示指示器
  • 通过indicator-type参数来控制指示器的类型，可选值为line、dot、number，默认为dot
  • 通过indicator-position参数来控制指示器的位置，可选值为left-top、center-top、right-top、left-bottom、center-bottom、right-bottom，默认为center-bottom

line - 横线指示器 ​

横线指示器显示为一条横线，通过indicator-bg-color参数来控制指示器默认的颜色，通过indicator-active-bg-color参数设置指示器激活时的颜色

vue
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="line"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="line"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>

dot - 点指示器 ​

点指示器默认情况下显示为一个点，在激活时显示为横线，通过indicator-bg-color参数来控制指示器默认的颜色，通过indicator-active-bg-color参数设置指示器激活时的颜色

vue
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="dot"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="dot"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>

number - 数字模式 ​

数字默认显示当前 swiper 的索引值和总的 swiper 数量，通过indicator-bg-color尝试设置指示器的背景颜色，通过indicator-text-color设置指示器文字的颜色

vue
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="number"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="number"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>

设置指示器的位置在右下角 ​

vue
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="number"
    indicator-position="right-bottom"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>
<template>
  <TnSwiper
    :data="swiperData"
    width="100%"
    height="420"
    indicator
    indicator-type="number"
    indicator-position="right-bottom"
  >
    <template #default="{ data }">
      <view class="swiper-data">
        <image class="image" :src="data" mode="aspectFill" />
      </view>
    </template>
  </TnSwiper>
</template>

API ​

Props ​

属性名说明类型默认值可选值
v-model/model-value当前选中 item 的索引值Number0-
dataswiperItem 的数据Array<any>[]-
blank-count空白 swiper 的数量，如果设置了 data 则以 data 的数据为准Number--
width轮播图宽度，默认单位为 rpx，可以传入带单位的尺寸值String--
height轮播图高度，默认单位为 rpx，可以传入带单位的尺寸值String--
autoplay是否自动播放Booleanfalsetrue
interval自动播放的时间间隔，单位 msNumber5000-
duration动画时长，单位 msNumber500-
loop是否循环播放Booleanfalsetrue
previous-margin前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值，具体差别可查看官方说明String0px-
next-margin后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值，具体差别可查看官方说明String0px-
indicator是否显示指示器Booleanfalsetrue
indicator-position指示器的位置Stringcenter-bottomleft-top | center-top | right-top | left-bottom | center-bottom | right-bottom
indicator-type指示器的类型Stringdotline
indicator-bg-color指示器颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
indicator-active-bg-color指示器激活时的颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
indicator-text-color指示器文本颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--

Emits ​

事件名说明类型
changeswiperItem 发生改变时触发(value: number) => void
item-clickswiperItem 点击时触发(value: number) => void

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI