在uni-app中使用LottieFiles(小程序)
LottieFiles官网:https://lottiefiles.com/uni-app中LottieFiles插件:https://ext.dcloud.net.cn/plugin?id=1044微信小程序中的LottieFiles的插件lottie-miniprogram:https://developers.weixin.qq.com/miniprogram/dev/extended/ut
·
LottieFiles官网:https://lottiefiles.com/
uni-app中LottieFiles插件:https://ext.dcloud.net.cn/plugin?id=1044
微信小程序中的LottieFiles的插件lottie-miniprogram:https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html
1、安装
按照微信小程序中的方法安装
npm install --save lottie-miniprogram
2、代码:
<template>
<view>
<canvas id="canvas" type="2d" style="width: 100px; height: 100px;"></canvas>
</view>
</template>
<script>
import lottie from 'lottie-miniprogram'
export default {
data() {
return {
}
},
onReady() {
// 主要差异点:
// 微信中使用的是wx.createSelectorQuery()
// uni-app中使用的是uni.createSelectorQuery()
uni.createSelectorQuery().select('#canvas').node(res => {
const canvas = res.node
const context = canvas.getContext('2d')
lottie.setup(canvas)
lottie.loadAnimation({
rendererSettings: {
context,
},
loop: true,
autoplay: true,
animationData:require('../../common/dataSVG.json')
// path: 'https://xxxx/dataSVG.json'
})
}).exec()
}
}
</script>
animationData支持本地资源
path (只支持网络地址)
更多推荐
已为社区贡献1条内容
所有评论(0)