更新记录

1.0.1(2021-08-08)

加了一个体验地址

1.0.0(2021-08-08)

首次发布


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.8.5 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

粒子特效背景组件 aki-particles

前言

这个插件是VincentGarreau大神的particles.js的uniapp封装。 做项目的时候发现留白的地方有点空,于是用了particles.js,然后感觉以后经常都能用上,就做成了组件,突然又想试试自己做插件,刚好是周末,就尝试了一下。 第一次写插件,有不专业的地方大家多多指教。有问题请联系QQ:50793655 演示地址

开始使用

template中使用

<aki-particles :particlestyle="particlestyle"></aki-particles>

script中引用

导入插件

import akiparticles from '../../uni_modules/aki-particles/components/aki-particles/aki-particles.vue'//导入组件

组件声明

components:{"aki-particles":akiparticles}

配置参数

particlestyle:{
    "style":"akira",
    "zindex":-1,
    "bgcolor":"#000022"
},

以上内容提供了几个简单的配置,

style

我除了提供了akira这个我自己用的样式,也把particles.js的几个官方样式引入了, 通过定义style的值,有akiradefaultbubblenasanyancatsnow几个样式可以选择;

zindex

zindex就如同字面意思,是设置粒子背景组件的层级,默认是-1,会被页面上的其他组件遮挡,导致点击和滑过效果无法呈现,可以同步设置页面其他组件层级,让鼠标事件可用;

bgcolor

bgcolor是背景颜色。

自定义

如果想自己设计效果,可以修改static/aki-particles目录下和style对应的json文件,也可以复制一份,文件名中间的snow之类替换为你自己的,然后在style中设置你文件名关键字就可以了。

在UNIAPP默认模板中体验

index.vue中 .content需要注释掉

// align-items: center;

.logo.text-area分别添加

z-index: 2;

"zindex"值改为:1

隐私、权限声明

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

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

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

许可协议

MIT协议

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