uniapp swiper 垂直无缝滚动_uniapp 无缝滚动

前言

最近在uniapp实现的小程序项目中遇到一个需求，多行文本垂直无缝滚动

之前没遇到过，看了一下官方的组件和第三方插件，要么是单行滚动的，要么是实现的效果不太好，所以打算自己写一个，没想到踩了不少坑，记录一下…

一、通过官方api—createAnimation动画实现（pass）

这个方法是第三方的一个插件来的灵感，主要通过定时器来实现无限循环动画，性能非常不好被pass
这种方法不仅需要采用定时器还需要不断地操作数组，把最后的元素放到前面，性能非常低且会导致页面闪烁，核心代码如下

let speed = 50;
let animation = uni.createAnimation({
					duration: this.height / speed,
					timingFunction: 'linear',
					delay: 0
				});
this.animation = animation;
this.timer = setInterval(() => {
if (this.scrollHeight >= (this.height - this.scrollBoxHeight)) {
						animation.translateY(0).step();
						this.scrollHeight = 0;
						this.animationData = animation.export();
						this.allList.push(this.allList.shift())
					} else {
			this.scrollHeight = this.scrollHeight + 1;
				animation.translateY(-this.scrollHeight).step();
				this.animationData = animation.export();
					}
				}, speed);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、使用swiper实现

想替代定时器又想让元素自动无限滚动想到了swiper可以实现垂直滚动，翻看了官网发现了display-multiple-items属性可以控制页面同时展示的元素数量，和想实现的需求一致。

引入swiper

<swiper circular :indicator-dots="false" :autoplay="true" :interval='1500' :duration="1500"
					easing-function="linear" :acceleration="true" :disable-touch="true" :vertical="true" class="swiper"
					:display-multiple-items="list.length>=4?4:list.length">
	<swiper-item v-for="(item,i) in list" :key="i" class="swiper_item"
						:class="list.length<4?'sItem':''">
			<view>{{item.name}}</view>
	</swiper-item>
</swiper>
1
2
3
4
5
6
7
8

swiper配置详情