1. Install npm install lottie-web -s
2. Introduce
import lottie from "lottie-web"; // Import plugin
import animationData from "@/assets/data.json"; // Import json data
3. Use
html <view class="lottie"></view>
js
optAnimation() {
lottie.destroy();
this.$nextTick(() => {
let elem = document.querySelector(".lottie")
let params = {
container: elem,
renderer: "svg",
loop: true,
autoplay: true,
animationData: animationData,
};
lottie.loadAnimation(params);
});
},
4. Problems encountered
The pictures in the json animation are not displayed, how to solve it 1. Use network pictures 2. Convert pictures to base64