Tuniao UI Uniapp V3图鸟UI vue3 uniapp 插件 - 幻灯片
该组件一般用于展示图片。
仓库地址
组件安装
bash
npm i tnuiv3p-tn-slideshownpm i tnuiv3p-tn-slideshow1
bash
pnpm add tnuiv3p-tn-slideshowpnpm add tnuiv3p-tn-slideshow1
bash
yarn i tnuiv3p-tn-slideshowyarn i tnuiv3p-tn-slideshow1
组件位置
typescript
import TnSlideShow from 'tnuiv3p-tn-slideshow/index.vue'import TnSlideShow from 'tnuiv3p-tn-slideshow/index.vue'1
平台差异说明
| 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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| data | 图片地址数据 | Array<String> | [] | - |
| width | 容器的宽度，默认单位rpx，也可以传递指定单位的值 | String | 100% | - |
| height | 容器的高度，默认单位rpx，也可以传递指定单位的值 | String | 100% | - |
| interval | 幻灯片切换间隔，单位ms | Number | 4000 | - |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 幻灯片切换事件 | (index: number) => void |
| click | 幻灯片点击事件 | (index: number) => void |