tui-lottie 动画组件 V2.2.0+ 会员组件

介绍

Lottie动画组件，动画资源参考Lottie官方链接 (opens new window)。

温馨提示

• App-Nvue与百度小程序可使用uni-app官方组件animation-view (opens new window)，支付宝小程序可使用支付宝官方组件lottie 动画 (opens new window)

• 小程序端支持需canvas支持设置type = 2d

• 小程序端如果不支持直接导入本地json文件，可将json内容放入js文件中导出使用。

• 小程序本身不支持动态执行脚本，lottie 的 expression 功能在小程序端是不支持的。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiLottie from "@/components/thorui/tui-lottie/tui-lottie.vue"
export default {
	components:{
		tuiLottie
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

注意：App-Nvue与百度小程序可使用uni-app官方组件animation-view (opens new window)，支付宝小程序可使用支付宝官方组件lottie 动画 (opens new window)

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序	QQ小程序
升级中	✓	✓	✓	✓	升级中	✓	升级中

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-lottie": "/components/thorui/tui-lottie/tui-lottie"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

引入本地json文件

通过 options 属性设置动画配置数据。

<!--uni-app-->
<tui-lottie :options="options"></tui-lottie>

// data 数据 及 方法
import addressJson from '@/static/lottie/no_address.json'
export default {
 data() {
 	return {
 		options: {
 			animationData: addressJson
 		},
 	}
 },
 methods: {
 	
  }
}

<!--微信小程序-->
<tui-lottie options="{{options}}"></tui-lottie>

// data 数据 及 方法
//小程序不支持直接导入本地json文件，可将json内容写入js中导出
import messageJson from '../../../static/lottie/no_message.js'
Page({
  data: {
     options: {
 	  animationData: messageJson
     }
  }
})

// Make sure to add code blocks to your code group

网络资源数据

通过 options 属性设置动画配置数据。

<!--uni-app-->
<tui-lottie :options="options"></tui-lottie>

// data 数据 及 方法
export default {
 data() {
 	return {
 		options: {
 			path: 'https://www.thorui.cn/lottie_json/no_signal.json'
 		}
 	}
 },
 methods: {
 	
  }
}

<!--微信小程序-->
<tui-lottie options="{{options}}"></tui-lottie>

// data 数据 及 方法
Page({
  data: {
     options: {
 	  path: 'https://www.thorui.cn/lottie_json/no_signal.json'
     }
  }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值
width	Number, String	组件宽度，单位rpx	600
height	Number, String	组件高度，单位rpx	400
options	Object	动画配置项，具体格式见下方说明	{path: '',animationData: '',autoplay: true,loop: true}
action	String	动画操作，可取值 play、pause、stop、destroy（无需手动销毁）	play

//options 具体格式参数说明
 {
	//动画资源地址，仅支持网络路径（小程序端需确保域名已授权访问）
	path: '',
	//动画json数据，优先与path，传值后path失效
	animationData: '',
	//是否自动播放动画，可选，不传默认为true
	autoplay: true,
	//是否循环播放动画，可选，不传默认为true
	loop: true
}

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
-	-	-

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码