更新记录

1.0.2(2024-01-30)

修复云打包问题

1.0.1(2024-01-27)

支持自定义文本、图片,图层隐藏功能

1.0.0(2024-01-25)

初始化

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.99,Android:9.0,iOS:不支持 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问