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

刚开始我是使用的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; */
	}

参考地址:https://opendocs.alipay.com/mini/component/lottie#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44705979/article/details/128456707