支付宝小程序使用lottie加载动画

uniapp开发支付宝小程序使用lottiefiles动画

大力水手锡锡

1292人浏览 · 2022-12-27 15:35:10

大力水手锡锡 · 2022-12-27 15:35:10 发布

刚开始我是使用的lottie-miniprogram来加载lottiefiles动画，可以正常加载
后来页面加了定时器不断ajax异步请求后台数据，结果请求一次动画会卡顿一次。
解决方案：使用阿里原生的lottie组件来加载动画

<lottie :assets-path="item.assetsPath" :autoplay="item.autoplay" id="myLottie" :path="item.path"
						:repeat-count="item.repeatCount" :placeholder="item.placeholder" class="item">
					</lottie>


data() {
			return {
				item: {
					id: 'lotties',
					desc: 'Django自动播放,低端设备降级',
					autoplay: true,
					path: 'https://piletest.wxzhida.cn/zfb/standby.json',
					placeholder: '',
					optimize: 'true',
					repeatCount: -1,
					assetsPath: 'https://piletest.wxzhida.cn/zfb/standby.json'
				},
			}
		}	

	onReady() {
			var lottieContext = my.createLottieContext('myLottie');
			lottieContext.play()
		},

	.item {
		width: 500rpx;
		height: 496rpx;
		/* opacity: 0.5; */
	}