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%);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。