微信小程序canvas 波浪背景组件 wave-bg-weapp
发布于 1 年前 作者 yejuan 1638 次浏览 来自 分享

微信小程序canvas 波浪背景组件 wave-bg-weapp

前言

最近的项目中坑爹的设计师设计了一个波浪的背景效果,
本着高度还原设计稿的原则打算用canvas实现一下,
一番百度之后并没有找到满意的效果,
所以自己撸了一个感觉还不错共享给大家.

效果

演示片段

https://developers.weixin.qq.com/s/g9tWlAmG7st8

依赖

组件依赖simplex-noise Simplex噪声算法

npm 安装 安装之后开发者工具点击npm构建

npm i wave-bg-weapp --production

引入

在app.json或index.json中引入组件

"usingComponents": {
   "bg": "/miniprogram_npm/wave-bg-weapp/bg/index"
}

页面结构

<bg class="bg" color="#d13435" percent="90" position="top" amp="20"></bg>

参数

参数 说明 类型 默认值 版本
color 波浪填充颜色 String #d13435 1.0.2
percent 高度百分比 如:90(即波浪高度为canvas高度的90%) Number 50 1.0.2
position 波浪填充位置 可设置 top: 在上部填充颜色, bottom: 在下部填充颜色 String top 1.0.2
amp 波浪振幅 Number 20 2.0.2

插槽

不知道为何canvas写完之后发现层级很高,但是看官方文档支持同层渲染阿 没研究明白,弄了个插槽可以将一些元素覆盖上去,本质上是写了cover-view,所以插槽里只能用cover-view下支持的组件,而且开发者工具看不到覆盖的东西,真机测试有效果

<bg class="bg" style="height: 50vh;" color="#d13435" percent="90" position="top" amp="20">
  <cover-view>插槽内容</cover-view>
</bg>

仓库

https://github.com/wzs28150/wave-bg-weapp

回到顶部