微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例-白红宇

本文实例讲述了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能。分享给大家供大家参考，具体如下：

怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY() 属性，给需要动画的元素添加上一个动画class。

1.蒙层的结构：

`
    ``<``view` `class``=``'list-fix'` `wx:if``=``"{
    {mengShow}}"` `bindtap``=``'outbtn'``>` `
    ``<``view` `class``=``'in-list {
    {aniStyle?"slideup":"slidedown"}}'` `catchtap``=``'inbtn'``>` `
    ``<``view` `class``=``'in-content'``>``<``text``>已选商品（1）
    ``<``text` `class``=``'iconfont icon-6'``>清空购物车
    ``
    ``<``view` `class``=``'cho-list'` `wx:for``=``"{
    {chooseList}}"` `wx:key``=``""``>``<``view` `class``=``'listName'``>{
   {item.Cname}}
    ``<``view` `class``=``'listPrice'``>￥{
   {item.Cprice}}
    ``<``view` `class``=``'opBtn'``>``<``view` `class``=``'com-btn cuts'` `>-
    ``<``view` `class``=``'com-num'``>{
   {item.Cnum}}
    ``<``view` `class``=``'com-btn add'` `>+
    ``
    ``
    ``
    ``
    `复制代码

注意：三元运算符里的slideup和slidedown一定要加上引号

2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式：

`@keyframes slidedown {``from {``transform: translateY(``0``);``}``to {``transform: translateY(``100%``);``}``}``.slidedown {``animation: slidedown` `0.5``s linear ;``}``.slideup {``animation: slideup` `0.5``s linear ;``}``@keyframes slideup {``from {``transform: translateY(``100%``);``}``to {``transform: translateY(``0``);``}``}`复制代码

其它的样式：list-fix是fixed定位，而in-list是absolute定位。

需要注意的一点是：做的时候，是从Y轴100%的位置处即最底部开始运动或是从0到100%，所以要设置z-index，才能实现在底部运动起来的时候或者回到100%即底部的时候，蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。

3.js

`page({``data: {``mengShow:``false``,``//蒙层的显示与否``aniStyle:``true``,` `//动画效果，默认slideup``},``//蒙层的显示``showMeng:``function``(e){` `//这是“确认下单”这整个购物车导航栏的点击事件``this``.setData({``mengShow:``true``,` `//蒙层显示``aniStyle:``true``//设置动画效果为slideup``})``},``outbtn:``function``(e){` `//这是list-fix的点击事件，给它绑定事件，是为了实现点击其它地方隐藏蒙层的效果``var` `that=``this``;``this``.setData({``aniStyle:``false``//设置动画效果为slidedown``})`setTimeout(``function``(){` `//延时设置蒙层的隐藏，这个定时器的时间，就是slidedown在css动画里设置的时间，这样就能实现slidedown动画完成后，蒙层才消失的效果。不设置定时器会导致动画效果看不见``that.setData({``mengShow:` `false``})``},500)``},``inbtn:``function``(e){` `//这个事件必须有，就算不做什么事情也要写上去，因为这个事件是为了防止事件冒泡，导致点击in-list这里面的元素时，点击事件冒泡到list-fix触发它的slidedown事件。``console.log(``"in"``)``},``})`复制代码

这样就能实现slidedown和slideup，点击其它地方隐藏某元素的功能了。

总结：

1.防止冒泡的点击事件：catchtap=""

2.点击父元素除子元素以外的其它地方隐藏父元素的方法：父元素绑定一个点击隐藏事件，然后子元素绑定catchtap这种能阻止冒泡的事件

3.巧用定时器设置属性值，可达到类似上面执行一个动画之后再执行另外一个动画的方法。

希望本文所述对大家微信小程序开发有所帮助。

本次给大家推荐一个交流圈，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。

对web开发技术感兴趣的同学，欢迎加入：582735936，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。

最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。