uniapp小程序无缝自动滚动 一屏多张图效果demo(整理)

<template>
	<view class="container">
		<swiper class="swiper" :interval="3000" :circular="true" autoplay>
			<block v-for="(group, groupIndex) in groupList" :key="groupIndex">
				<swiper-item class="swiper-group">
					<view v-for="(item, itemIndex) in group" :key="itemIndex" class="item">{{ item }}</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupList: [
					['Image 1', 'Image 2', 'Image 3'],
					['Image 4', 'Image 5', 'Image 6'],
					['Image 7', 'Image 8', 'Image 9']
				],
			};
		},
		onLoad() {
			this.startAutoScroll();
		},
		methods: {
			startAutoScroll() {
				setInterval(() => {
					const swiper = uni.createSelectorQuery().select('.swiper');
					swiper.boundingClientRect((rect) => {
						if (rect) {
							const scrollLeft = rect.scrollLeft + rect.width;
							swiper.scrollBy({
								left: scrollLeft,
								behavior: 'smooth',
							});
						}
					}).exec();
				}, 3000);
			},
		},
	};
</script>

<style>
	.container {
		height: 200px;
		overflow: hidden;
	}

	.swiper {
		white-space: nowrap;
		height: 100%;
	}

	.swiper-group {
		display: inline-block;
		width: 100%;
		white-space: initial;
	}

	.item {
		height: 100%;
		width: 33.33%;
		display: inline-block;
		line-height: 200px;
		text-align: center;
		background-color: #ccc;
	}
</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
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71