tm-swiper 轮播

🎉目录导航

👉使用方法,跟数1,2,3一样简单

基本示例

<tm-swiper :list="list"></tm-swiper>

<script>
	export default {
		data() {
			return {
				list:[
					'https://picsum.photos/300?jv=3',
					'https://picsum.photos/300?jv=34',
					'https://picsum.photos/300?jv=5'
				]
			}
		},
		methods: {}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

👉完整的示例

可以复制到页面直接运行

<template>
	<view :class="$tm.vx.state().tmVuetify.black?'black bk':''">
		<tm-menubars title="轮播" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-swiper :autoplay="false" :height="500" dot-model="round" dot-direction="right" :indicator-dots="true" :list="list1"></tm-swiper>
		
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">指示点类型,加两边偏移</view>
		<tm-swiper  :round="6" :margin="32"  :autoplay="true"  :indicator-dots="true" :list="list"></tm-swiper>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">3d轮播，可自己设置缩放大小。</view>
		
		<tm-swiper  :round="6" :ani3d="220"  :autoplay="true" dot-model="rect"  :indicator-dots="true" :list="list"></tm-swiper>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">3d轮播，可自己设置缩放大小。</view>
		
		<tm-swiper  :round="6" :ani3d="120"  :autoplay="true" dot-model="rect"  :indicator-dots="true" :list="list"></tm-swiper>
		<view class="pa-12 text-size-s text-weight-b blue text ma-32 round-2" :class="$tm.vx.state().tmVuetify.black?'black bk':''">内联，指示点类型，位置</view>
		
		<view class="ma-32  round-3 overflow">
			<tm-swiper :round="3" :height="300" :width="650" inline  color="red" :autoplay="true" dot-model="number"  :indicator-dots="true" :list="list"></tm-swiper>
		</view>
		<view class="ma-32   round-3 overflow">
			<tm-swiper :round="3" :height="300" :width="650"  inline :autoplay="true" dot-model="rect" :circular="true" dot-direction="right"  :indicator-dots="true" :list="list"></tm-swiper>
		</view>
		
		<view style="height: 50upx;"></view>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script>

	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSwiper from "@/tm-vuetify/components/tm-swiper/tm-swiper.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSwiper,tmRow,tmCol},
		data() {
			return {
				color:['primary','red','blue'],
				list1:[
					
					'https://picsum.photos/800?jv=34',
					{
						src:'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
						type:'video'
						
					},
					{
						src:'https://picsum.photos/800?jv=74',
						title:'哈哈，这是一个标题呦'
					},
					'https://picsum.photos/800?jv=3',
					'https://picsum.photos/800?jv=5'
				],
				list:[
					
					'https://picsum.photos/800?jv=34',
					{
						src:'https://picsum.photos/800?jv=74',
						title:'哈哈，这是一个标题呦'
					},
					'https://picsum.photos/800?jv=3',
					'https://picsum.photos/800?jv=5'
				]
			}
		},
		methods: {
			
		},
		mounted() {

		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

👉props属性表

属性名称	类型	可选值	默认值	说明
width	Number	任意数字	0	轮播宽度，0为自己计算
height	Number	任意数字	0	轮播高度，0为自己计算。
interval	Number	任意数字	30000	自动切换时间间隔
duration	Number	任意数字	500	滑动动画时长
current.sync	Number	任意数字	0	当前播放索引，可双向绑定current.sync
rang-key	String	任意数字	''	图片列表object数组时，需要提供图片地址的键值。
list	Array	任意数字	[]	图片列表，可以是string数组或者object数组。
color	String	任意主题色名称	primary	指示点的主题色
dot-model	String	dot/	number/rect	dot
dot-direction	String	left/center/right	center	指示点的位置
inline	Boolean	true/false	false	是否内联，方便一排放多个轮播组件
previmage	Boolean	true/false	true	是否预览图片，点击图片时，放大预览
vertical	Boolean	true/false	false	是否竖向滚动
circular	Boolean	true/false	false	是否采用衔接滑动，即播放到末尾后重新回到开头
autoplay	Boolean	true/false	false	是否自动切换
indicator-dots	Boolean	true/false	false	是否显示指示
round1.1.7	Number	-	0	开启圆角,单位rpx
margin1.1.7	Number	-	0	开启两边间距,单位rpx
ani3d1.2.6	Number	-	0	开启缩放，以便实现3d卡片效果

如果为list为object时，可支持标题显示，或者视频格式

属性list当object时，可为如下格式：
{
	src:'图片或者视频地址',如果你的字段不是src,可通过rang-key更改。
	title:'轮播标题',//当前src为视频时，此标题不显示。
	type:'video',//此字段默认不可填写，填写时，仅可填写'video',即表示此项目轮播的是视频，而不是图片。可以为空，即默认为图片。
}

1
2
3
4
5
6
7

👉slot插槽

使用方法见完整示例

插槽名称	插槽参数	插槽数据	说明
default	item	项目数据{data,index}	项目插槽

👉事件

事件名称	返回参数	返参类型	说明
@change	参数返回当前播放位置	Number	轮播切换时触发。
@click	参数返回点击项目的数据	-	点击软件项目时触发

👉更新日志

2021年8月20日14:8:5 初始版本。

tmzdy 于 2022/12/7 编辑报错？ | 评论？

# tm-swiper 轮播

# 👉使用方法,跟数1,2,3一样简单

# 👉完整的示例

# 👉props属性表

# 👉slot插槽

# 👉事件

# 👉更新日志