微信小程序自定义波浪组件使用方法详解


Posted in Javascript onSeptember 21, 2019

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

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

微信小程序自定义波浪组件使用方法详解

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

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

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

首先定义组件 wave

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

<!--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>,欢迎您
  </view>
</view>
  <view class="water">
    <view class="water-c">
      <view class="water-1"> </view>
      <view class="water-2"> </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+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;
}

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

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()
 },

再来一个静态图:

微信小程序自定义波浪组件使用方法详解

好了。

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

Javascript 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 #Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 #Javascript
You might like
用php解析html的实现代码
2011/08/08 PHP
php检测文件编码的方法示例
2014/04/25 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python爬虫开发与项目实战
2020/12/16 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
村委会主任先进事迹
2014/01/15 职场文书
房屋出租协议书
2014/04/10 职场文书
网页美工求职信范文
2014/04/17 职场文书
大学生英语演讲稿
2014/04/24 职场文书
好的促销活动方案
2014/08/21 职场文书
买房子个人收入证明
2014/10/12 职场文书
交通安全学习心得体会
2016/01/18 职场文书