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


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 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
jquery默认校验规则整理
Mar 24 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
js实现前面自动补全位数的方法
Oct 10 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
vue实现放大镜效果
Sep 17 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python连接字符串的方法小结
2015/07/13 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python自动生成证件号的方法示例
2021/01/14 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
写得不错的求职信范文
2014/07/11 职场文书
会计工作岗位职责
2015/02/03 职场文书
同意转租证明
2015/06/24 职场文书
JavaScript函数柯里化
2021/11/07 Javascript