Skip to content
12:13

图鸟UI vue3 uniapp 插件 - 幻灯片

该组件一般用于展示图片。

仓库地址

Github

npmjs

组件安装

bash
npm i tnuiv3p-tn-slideshow
npm i tnuiv3p-tn-slideshow
bash
pnpm add tnuiv3p-tn-slideshow
pnpm add tnuiv3p-tn-slideshow
bash
yarn i tnuiv3p-tn-slideshow
yarn i tnuiv3p-tn-slideshow

组件位置

typescript
import TnSlideShow from 'tnuiv3p-tn-slideshow/index.vue'
import TnSlideShow from 'tnuiv3p-tn-slideshow/index.vue'

平台差异说明

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

基础使用

  • 将图片地址数组传入组件的data属性中即可。
vue
<script lang="ts" setup>
import { ref } from 'vue'

const imageData = ref<string[]>([
  'https://resource.tuniaokj.com/images/avatar/xiong/x1.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x3.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x4.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x5.jpg',
])
</script>

<template>
  <view class="wrapper">
    <TnSlideShow :data="imageData" />
  </view>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
}
</style>
<script lang="ts" setup>
import { ref } from 'vue'

const imageData = ref<string[]>([
  'https://resource.tuniaokj.com/images/avatar/xiong/x1.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x3.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x4.jpg',
  'https://resource.tuniaokj.com/images/avatar/xiong/x5.jpg',
])
</script>

<template>
  <view class="wrapper">
    <TnSlideShow :data="imageData" />
  </view>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
}
</style>

API

Props

属性名说明类型默认值可选值
data图片地址数据Array<String>[]-
width容器的宽度,默认单位rpx,也可以传递指定单位的值String100%-
height容器的高度,默认单位rpx,也可以传递指定单位的值String100%-
interval幻灯片切换间隔,单位msNumber4000-

Emits

事件名说明类型
change幻灯片切换事件(index: number) => void
click幻灯片点击事件(index: number) => void

Tuniao UI