微信小程序實現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.巧用定時器設置屬性值，可達到相似上面執行一個動畫以後再執行另一個動畫的方法。

但願本文所述對你們微信小程序開發有所幫助。