更新记录
1.0.6(2024-10-27)
适配hbx 4.31版本readFile接口调整引起的类型错误
1.0.5(2024-06-16)
修改minSdkVersion版本为21
1.0.4(2024-06-16)
升级依赖为最新版本
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.31,Android:5.0,iOS:不支持,HarmonyNext:不确定 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
xwq-svga-view
开发文档说明
注意:
> * 需打自定义基座运行
> * 需打自定义基座运行
> * 需打自定义基座运行
参数说明
属性 |
类型 |
默认值 |
必填 |
描述 |
source |
string |
- |
Y |
资源地址(项目static目录文件或网络地址) |
loops |
number |
0 |
Y |
循环次数 |
dynamiText |
JSONObject |
- |
N |
自定义文本内容(数据格式需要JSON对象格式,例:'{"size":28,"color":"#ff0000","text":"自定义内容","keyName":"GuangHuan"}') |
dynamicImage |
JSONObject |
- |
N |
替换指定key的图片内容,支持本地图片和网络地址(数据格式需要JSON对象格式,例:'{"url":"/static/logo.jpg","keyName":"xin02"}' |
hiddenKeyName |
string |
- |
N |
隐藏对应key的图片 |
方法说明
- start 开始动画
- pause 暂停动画
- continuePlay 继续动画
使用说明
<template>
<view class="page">
<scroll-view>
<xwq-svga-view v-if="showSvga" ref="svga" :hiddenKeyName="hiddenKeyName" :dynamicText="dynamiText" :dynamicImage="dynamicImage" hiddenKeyName="张三11" :source="source" :loops="loops" :style="{width:'414px',height:'350px'}" @finished="svgaFinish"></xwq-svga-view>
<button @click="start">开始动画</button>
<button @click="pause">暂停动画</button>
<button @click="continuePlay">继续动画</button>
</scroll-view>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
showSvga:true,
// source:"https://www.wanguoqiche.com/files/web/pic/demo/car.svga?raw=true",
source:"/static/angel.svga",
loops:1,
dynamiText:'{"size":28,"color":"#ff0000","text":"自定义内容","keyName":"GuangHuan"}',
dynamicImage:'{"url":"/static/logo.jpg","keyName":"xin02"}',
// dynamicImage:'{"url":"https://www.wanguoqiche.com/files/web/pic/jns/danger_icon.png?raw=true","keyName":"xin02"}',
hiddenKeyName:'keyName'
}
},
methods: {
//暂停动画
stop(){
let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
svgaC.stop();
},
//开始动画
start(){
let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
svgaC.start();
},
//暂停动画
pause(){
let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
svgaC.pause();
},
//继续动画
continuePlay(){
let svgaC = (this.$refs["svga"] as XwqSvgaViewElement);
svgaC.continue();
},
//动画完成
svgaFinish(){
console.log('动画完成')
},
}
}
</script>
<style>
.page{
background-color:#f2f2f2;
height:100%;
}
.pic-wrap{
margin-top:50px;
width:100%;
justify-content: center;
align-items: center;
}
.qr-code{
width:100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>