本文實例講述了微信小程序實現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.巧用定時器設置屬性值，可達到類似上面執行一個動畫之后再執行另外一個動畫的方法。

希望本文所述對大家微信小程序開發有所幫助。
本次給大家推薦一個交流圈，里面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入：582735936，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最后，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。

總結

以上是生活随笔為你收集整理的微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。