npm安装
npm install svgaplayerweb --save
下载svga.min.js文件:https://github.com/svga/SVGAPlayer-Web
存放于文件夹中,在使用的页面引入
import SVGA from '../../data/svga.min.js';
在页面需要的地方写入逻辑
onReady(){
//svga的播放情况
const player = new SVGA.Player('#svgaBox');
var parser = new SVGA.Parser('#svgaBox');
//注意,这里必须是服务器地址,否则报错
parser.load('https://bloomerandroid172836-dev.s3.us-west-2.amazonaws.com/bloomer/pc/landingpage/call.svga', function(videoItem) {
player.loops = 1000; // 设置循环播放次数是1
player.setVideoItem(videoItem);
player.startAnimation();
});
setTimeout(() => {
if(this.clickOn){
uni.navigateTo({
url: './videoPage?id=1',
});
}
}, 5000);
},
最后在页面中使用 这里重点是必须用div 最开始我使用view标签,怎么使用都不显示
<div class="svgaPage">
<div id="svgaBox" @click="jump()"></div>
</div>
加上css样式
#svgaBox{
width: 256rpx;
height: 256rpx;
position: absolute;
bottom: 128rpx;
left: 50%;
transform: translateX(-50%);
}