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

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

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

1.蒙层的结构：

`<!-- 购物车蒙层 -->`
`<``view` `class``=``'list-fix'` `wx:if``=``"{{mengShow}}"` `bindtap``=``'outbtn'``>` `<!--mengShow是蒙层是否显示的标志，而后蒙层绑定outbtn的点击事件-->`
`<``view` `class``=``'in-list {{aniStyle?"slideup":"slidedown"}}'` `catchtap``=``'inbtn'``>` `<!--这里的三元运算符是判断动画该执行哪种，catchtap这个是阻止冒泡的点击事件，这个事件必须有，才能阻止冒泡 -->`
`<``view` `class``=``'in-content'``>`
`<``text``>已选商品（1）</``text``>`
`<``text` `class``=``'iconfont icon-6'``>清空购物车</``text``>`
`</``view``>`
`<``view` `class``=``'cho-list'` `wx:for``=``"{{chooseList}}"` `wx:key``=``""``>`
`<``view` `class``=``'listName'``>{{item.Cname}}</``view``>`
`<``view` `class``=``'listPrice'``>￥{{item.Cprice}}</``view``>`
`<``view` `class``=``'opBtn'``>`
`<``view` `class``=``'com-btn cuts'` `>-</``view``>`
`<``view` `class``=``'com-num'``>{{item.Cnum}}</``view``>`
`<``view` `class``=``'com-btn add'` `>+</``view``>`
`</``view``>`
`</``view``>`
`</``view``>`
`</``view``>`

注意：三元运算符里的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.巧用定时器设置属性值，可达到相似上面执行一个动画以后再执行另一个动画的方法。

但愿本文所述对你们微信小程序开发有所帮助。