小程序 制作自定义弹层 添加弹层显示和隐藏动画 父组件与子组件（自定义组件）之间传值

0.说明与效果

本文打算用一个具体的例子，总结下这些开发过程中学习到的知识：

1.制作自定义组件，并在页面中引用

2.自定义组件的内容是一个表单弹层，添加弹层在弹出和隐藏时的动画

3.展示父组件与子组件（自定义组件）的传参功能

看下最终的效果图：

1.设置自定义组件，并在页面中引用

官网传送门 其实步骤很简单

1.在跟目录中创建components目录（用于放置自定义组件，在此目录下再创建组件目录，新建组件时记得选择 ‘新建Component’ 即可

 如果创建成功，打开js文件，它与普通的page是有区别的

2.在需要引入此组件的json文件中引入

 3.在父组件的wxml中使用子组件

绑定的方法用于子组件向父组件传参，后面会解释

2.设置表单弹层，添加弹出和隐藏时的动画

关于弹层实现的逻辑，在之前的博客有详细写到，自定义弹窗的简单例子，具体思路是添加一个变量，控制弹层的显示和隐藏。

popup.wxml

popup.js

点击 打开表单弹层 按钮，触发 openPopup方法，此方法将show变量改为true，弹层显示，回到popup.wxml，弹层内容最外层设置了代码 style="opcity:0;"，此代码的作用是弹层出现时内容还是隐藏的，注意这和真正隐藏有区别，因为此时弹层内容已经被渲染到dom，只是由于opcity:0，它是看不到的。这样设置的目的在于，我在这设置的动画是逐渐浮现。如果不这样设置，会使得点击按钮时弹层先闪一下，即先 完全显示->再从透明慢慢渐变到完成显示，体验效果很差。

接下来的问题是，动画函数如何编写？微信小程序动画传送门

官网提供了两种方法，wx.createAnimation和this.animate，前者属于旧方法，官网推荐使用后者描写动画，此例子也是采用的后一种方法

this.animate有4个参数

selector: 选择器，id选择器或类选择器，如以上例子animate函数作用的对象是带有类wall的dom元素，对应到wxml，即是整个弹层了

keyframes: 这是一个数组，数组的每个元素都是一个对象。我的理解是，数组中的每个对象，代表某种状态，动画的过程就是从数组的第一个对象渐变到最后一个对象。对象的内容在官方文档中有详细介绍，与css的语法无异。此例子对每个对象只采用opacity和backgroundColor两种属性，熟悉css的同学应该知道，两个属性的意思分别是透明度和背景颜色，当opacity的值为0时，监听的元素完全透明，为1时即完全显示，此例子就是一个使监听元素从透明到完全显示的过程，背景颜色也从灰色渐变成白色

duration:动画执行时间

callback:动画执行完后调用的函数（此例子没有使用）

3.展示父组件与子组件（自定义组件）的传参功能

子组件向父组件传参

回到的popup.wxml，将表单内容放到form里了，当点击提交按钮时，通过函数submit获取到输入的内容

popup.wxml

popup.js -> submit方法

此方法的作用就是获取到表单的数据（关于如何上传图片并且拿到图片信息不详细展开，可看文末附上的项目链接）

obj 拿到数据

this.closePopup() 关闭弹层

关键方法  this.triggerEvent("itemChange", obj)

itemChange:对应父组件应用子组件时绑定的方法，

obj:传递给父组件的对象

结合父组件引用的细节描写会更好理解

父组件 index.wxml

大家注意到 binditemChange="handeItemChange" 其中bind是绑定方法（可冒泡），itemChange与子组件传参方法的字段必须完成一致。然后这里绑定一个方法handeItemChange，此方法即可获取子组件传递过来的obj

index.js

从中提取数据到父组件的属性中即可

父组件向子组件传参 

这个比较好实现（例子中没有，找不到放这些信息的地方），自行百度吧...

结束：内容有点多，感觉没有突出的中心点，本文的最终目的是对近来学到的知识做一个总结。细心的同学会发现在弹层的文本输入框右下角有一个监听输入字数的小功能，个人觉得此功能还是挺常见的，感兴趣的同学可以去项目代码中瞅瞅。这里遗留了一个问题，在上传图片的时候，本来打算引用WeUI的uploader组件，但在编写代码过程中，发现uploader组件在page中能正常使用，但无奈放到组件中失效了，具体表现在点击上床组件之后，没有回显，对应的files也是空的。这个WeUI折腾了挺久，个人觉得，挺难用的吧。。。

项目链接：小程序自定义弹层