At the beginning, I used the lottie-miniprogram to load the lottiefiles animation, which could be loaded normally.
Later, a timer was added to the page to continuously ajax asynchronously request background data, and as a result, the animation would freeze once when it was requested.
Solution: Use Ali's native lottie component to load the animation
<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; */
}
Reference address: https://opendocs.alipay.com/mini/component/lottie#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E