bilibili小程序

使用小贴士

cover-svga

基础库 3.31.0 开始支持，低版本需做兼容处理。涉及API：bl.createSVGAContext

仅支持在 cover-view 中使用，支持 svga 展示的组件。

属性名类型默认值必填说明版本
srcstring是SVGA 动画资源地址，支持本地和线上地址3.31.0
loopsnumber0否动画循环次数，小于或等于 0 代表无限循环3.31.0
clearsAfterStopbooleantrue否动画播放完是否清空画布3.31.0
fillModestringforward否动画播放完成的表现，详见 fillMode 有效值3.31.0
loadedfunction否动画加载成功时触发，event.detail={naturalWidth, naturalHeight, frames, fps, dynamicObjectKeys}3.31.0
endedfunction否动画播放完成时触发，如果 loops <= 0，则不会触发3.31.0
frameupdatefunction否动画播放到指定帧时触发，event.detail={frame}3.31.0
percentageupdatefunction否动画播放到指定进度时(0.0 - 1.0)触发，event.detail={percentage}3.31.0
errorfunction否动画加载出错或播放出以及setImage加载图片出错时触发，event.detail={errorDesc}3.31.0
animation
string
""
否执行动画的id（animation）
3.34.0

fillMode 有效值

值类型说明
forwardstring动画播放完，停止在当前播放 range 的最后一帧
backwardstring动画播放完，停止在当前播放 range 的第一帧

默认样式

.bl___cover-svga {
    width: 320px;
    height: 240px;
    overflow: hidden;
}

示例代码

<template>
    <cover-view class="bl-cover-view">
        <cover-svga
            id='svga'
            class="bl-cover-svga"
            :src="'https://i0.hdslb.com/bfs/mall/mall/6e/76/6e760e87263ff89c801194fb81e6523d.svga'"
            :loops="0"
            @loaded="loadedFn"
        ></cover-svga>
    </cover-view>
</template>

<script>
export default {
    methods: {
        loadedFn() {
            bl.createSVGAContext('svga').play();
        }
     }
};
</script>
<style scoped>
.bl-cover-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}

.bl-cover-svga {
    width: 320px;
    height: 320px;
    background-color: black;
}
</style>
← cover-buttonb-icon →