解释:仅支持 Lottie 动画的客户端原生组件,使用时请注意相关限制,动画资源地址可到 lottie 的官方库进行查询。Lottie 使用入门详见官方介绍;设计师精彩示例及动效文件详见设计社区。

创新互联建站成都网站建设按需求定制设计,是成都营销推广公司,为石凉亭提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站营销推广热线:18982081108
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
path | String | 是 | 动画资源地址,目前只支持绝对路径 | - | |
loop | Boolean | false | 否 | 动画是否循环播放 | - |
autoplay | Boolean | true | 否 | 动画是否自动播放 | - |
action | String | play | 否 | 动画操作,可取值 play、pause、stop | - |
hidden | Boolean | true | 否 | 是否隐藏动画 | - |
bindended | EventHandle | 否 | 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发) | 3.0.0 |
| 值 | 说明 |
|---|---|
play | 播放 |
pause | 暂停 |
stop | 停止 |
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
class="controls"path="{{path}}"loop="{{loop}}"autoplay="{{autoplay}}"action="{{action}}"hidden="{{hidden}}"bindended="lottieEnd">
在开发者工具中打开
在开发者工具中打开
在 WEB IDE 中打开
此种使用方式建议在真机查看完整效果,注意 path 属性仅可在组件初始化时传入,不支持用 setData 方法后续动态传入。
s-if="{{shouldShow}}"class="controls"path="{{path}}"loop="{{loop}}"autoplay="{{autoplay}}"action="{{action}}"hidden="{{hidden}}"bindended="lottieEnd">