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


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弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
解决小程序无法触发SESSION问题
Feb 03 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.MVC的模板标签系统(二)
2006/09/05 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
javascript 写类方式之一
2009/07/05 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python 线程池用法简单示例
2019/10/02 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
零基础学python应该从哪里入手
2020/08/11 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python中time tzset()函数实例用法
2021/02/18 Python
最新的大学生找工作自我评价
2013/09/29 职场文书
水电工岗位职责
2014/02/12 职场文书
小学生秋游活动方案
2014/02/23 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
质检员工作总结2015
2015/04/25 职场文书
自我检讨书怎么写
2015/05/07 职场文书
公司联欢会主持词
2015/07/04 职场文书
小学作文之描写天气
2019/08/15 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python