提交 35cf84b9 编写于 作者: Y yurj26

feat(h5 animation-view): update

上级 e2885e44
<template>
<div>
<animation-view-h5 class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
:hidden="hidden" @bindended="lottieEnd">
</animation-view-h5>
<button @click="playLottie" type="primary">{{status}}lottie动画</button>
<button @click="changeLottie" type="primary">切换{{location}}动画</button>
<button @click="changeLottieDisplay" type="primary">{{display}}动画</button>
</div>
</template>
<script>
export default {
data() {
return {
path: '/uni_modules/uni-animation-view/static/lottie.json',
loop: false,
autoplay: false,
action: 'stop',
hidden: false,
status: '播放',
location: '网络',
display: '隐藏'
}
},
methods: {
playLottie() {
this.action = ('play' !== this.action) ? 'play' : 'pause';
this.status = ('pause' === this.action) ? '播放' : '暂停';
},
changeLottie() {
this.action = 'stop';
this.status = '播放';
this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' : '/uni_modules/uni-animation-view/static/lottie.json';
this.location = ('网络' === this.location) ? '本地' : '网络';
console.log('path='+this.path);
},
changeLottieDisplay() {
this.hidden = !this.hidden;
this.display = this.hidden ? '显示' : '隐藏';
},
lottieEnd() {
this.status = '播放';
this.action = 'stop';
console.log('动画播放结束');
}
}
}
</script>
<style>
.animation {
width: 750rpx;
height: 300rpx;
background-color: #CCCCCC;
margin-bottom: 20px;
}
</style>
{
"id": "animation-view-h5",
"displayName": "animation-view",
"version": "1.0.0",
"description": "使用uts组件开发,实现animation-view组件",
"keywords": [
"animation-view",
"lottie"
],
"repository": "",
"engines": {
"HBuilderX": "^3.7.0"
},
"dcloudext": {
"type": "component-uts",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-android": {
"minVersion": "21"
},
"app-ios": {
"minVersion": "11"
}
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册