©2020-2024 ioDraw All rights reserved
I've seen a lot of them recently app There is a wave background on it , Dynamic , There are static ones , Here is the dynamic used in the applet .
Let's take a look at the renderings ： The text inside is defined within the component .
This is with two svg For pictures of css Keyframe animation to do the effect （ Here, thank you for the bullet SMS front-end group of small partners to provide web Version of css Animation file ）
Using in applets , Pay attention to one problem ： namely svg It can't be used directly , Need to be converted to base64（ We should have a collection ）, I've already converted here , Below wxss in .
By the way, custom components are used here ：
First define the component wave
wave.wxml： I use it to display personal information by default . among isShowInfo To control whether it is displayed
<!--utils/wave/waves.wxml--> <view class="zr"> <view class='user_box' hidden="{
{isShowInfo}}"> <view class='userInfo'> <open-data
type="userAvatarUrl"></open-data> </view> <view class='userInfo_name'>
<open-data type="userNickName"></open-data>, Welcome </view> </view> <view
class="water"> <view class="water-c"> <view class="water-1"> </view> <view
class="water-2"> </view> </view> </view> </view>
wave.js： Here, the component defines a private method __hideInfo(), Used to hide internal components , Flexible use is very convenient .
// utils/wave/waves.js Component({ /** * List of properties for the component */ properties: { }, /** *
Initial data for the component */ data: { isShowInfo:false }, /** * Component's method list */ methods: {
__hideInfo:function(){ this.setData({ isShowInfo:true }) } }, })
wave.json： The first is to set it as a custom component , The second option is to use other custom components , For example, reference components , I'll use it later
{ "component": true, "usingComponents": {} }
wave.wxss：zr Change the background to what you need , Pass or use attributes .
/* Component background color */ .zr { background: #0396FF; width: 100%; height:100px; position:
relative; } .water { position: absolute; left: 0; bottom: -10px; height: 30px;
width: 100%; z-index: 1 } .water-c { position: relative } .water-1 {
background:
url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==")
repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s
infinite linear; animation: wave-animation-1 3.5s infinite linear } .water-2 {
top: 5px; background:
url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==")
repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s
infinite linear; animation: wave-animation-2 6s infinite linear } .water-1,
.water-2 { position: absolute; width: 100%; height: 60px } .back-white {
background: #fff } @keyframes wave-animation-1 { 0% { background-position: 0
top } 100% { background-position: 600px top } } @keyframes wave-animation-2 {
0% { background-position: 0 top } 100% { background-position: 600px top } }
.user_box { display: flex; z-index: 10000!important; } .userInfo_name { flex:
1; vertical-align: middle; width: 100%; margin-left: 5%; margin-top: 5%; }
.userInfo { flex: 1; width: 100%; border-radius: 50%; overflow: hidden;
max-height: 50px; max-width: 50px; margin-left: 5%; margin-top: 5%; border: 2px
solid #fff; }
Component definition complete , The following is a reference to this component ：
index.json: It's used here userxxx Using our defined components , The reference name is wave, This is also the node name that will be used later , and view Same as direct use
{ // Using components , Reference name （ Directly used as a node ）, route "usingComponents": { "wave": "../com/wave/waves" } }
index.wxml
index.js: adopt wave Set id Get component object , Calling private methods . Remove internal information .
onLoad: function (options) { this.wave = this.selectComponent("#wave");
this.wave.__hideInfo() },
Another static diagram ：
okay .
Technology