小程序开发商排名_微信小程序自界说波澜组件使

2021-01-07 11:07

微信小程序自定义波浪组件使用方法详解       这篇文章主要为大家详细介绍了微信小程序自定义波浪组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态。

先看看效果图:里面的文本是组件内部定义的。

这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件)

在小程序中使用,注意一个问题:就是svg不可以直接使用,需要转为base64(这个大家应该有收藏吧),这里我已经转换好了,在下面的wxss中。

这里顺便用一下自定义组件:

首先定义组件 wave

 wave.wxml:这里我默认是用得显示个人信息。其中isShowInfo来控制是否显示

 !--utils/wave/waves.wxml-- 
 view 
 view hidden="{{isShowInfo}}" 
 view 
 open-data type="userAvatarUrl" /open-data 
 /view 
 view 
 open-data type="userNickName" /open-data ,欢迎您
 /view 
 /view 
 view 
 view 
 view /view 
 view /view 
 /view 
 /view 
 /view 

wave.js:这里组件定义一个私有方法 __hideInfo(),用来隐藏内部组件,灵活运用很方便。

// utils/wave/waves.js
Component({
* 组件的属性列表
properties: {
* 组件的初始数据
data: {
isShowInfo:false
* 组件的方法列表
methods: {
__hideInfo:function(){
this.setData({
isShowInfo:true
})

wave.json:第一个是设置为自定义组件,第二个可选是使用其他的自定义组件,比如引用组件,一会就会用得

"component": true,
"usingComponents": {}
}

wave.wxss:zr的背景直接改为自己需要的,或者用属性传递。

/*组件背景颜色*/
.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+Npb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNo凡科抠图JodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+VsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBl凡科抠图JNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxs凡科抠图IjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBl凡科抠图JNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+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+Npb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNo凡科抠图JodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+VsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBl凡科抠图JNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3Jt凡科抠图J0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlk凡科抠图JQYXRoLTIiIHNrZXRjaDp0eXBl凡科抠图JNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+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 {
background-position: 0 top
100% {
background-position: 600px top
@keyframes wave-animation-2 {
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;
}

组件定义完,下面是引用这个组件:

index.json:这里用到了userxxx使用我们定义的组件,引用名为wave,这也是一会使用的节点名,和view一样直接用

//使用组件,引用名(直接当做节点使用),路径
"usingComponents": {
"wave": "../com/wave/waves"
}

index.wxml

index.js:通过wave设置的id获取组件对象,调用私有方法。去除内部信息。

 onLoad: function (options) {
 this.wave = this.selectComponent("#wave");
 this.wave.__hideInfo()
 },

再来一个静态图:

好了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



扫描二维码分享到微信

在线咨询
联系电话

020-66889888