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


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 Event对象详解及使用示例
Nov 22 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
在Python中COM口的调用方法
2019/07/03 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
教师求职信范文分享
2013/12/27 职场文书
大学生如何写自荐信
2014/01/08 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
初中学校对照检查材料
2014/08/19 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python