微信小程式底部彈框動畫

在寫小程式的時候，一般會碰到底部彈出動畫，就像下面這樣的效果

直接進入正題

1.首先需要寫點選觸發事件

<

view 
class
='text' bindtap='choosesezi'>請選擇：顏色/尺碼
view
>

<

view 
class
='masklayer'
wx:if
="}"
bindtap
='hidemodal'
>
view
>
<
view 
class
='choose'
wx:if
="}"
animation
='}'
>
這裡面是內容
view
>

先看這裡，再看下面的方法：

//將該變數賦值給當前動畫

that.animation =animation

//先在y軸偏移，然後用step()完成乙個動畫

animation.translatey(200).step()

//用setdata改變當前動畫

that.setdata()

//設定settimeout來改變y軸偏移量，實現有感覺的滑動

settimeout(function

()) },200)

},現在點選view，內容已經出現了，如何讓他消失呢？這個就很簡單，同上面的方法一樣。當然如果你想更簡單的方法，那就直接點選遮罩層，讓wx:if=},在js裡面改變choosesize:false就行了

下面是點選遮罩層，隱藏動畫

hidemodal:function

(e))
that.animation =animation
animation.translatey(200).step()
that.setdata()
settimeout(
function
() )
}, 200)
}

小程式底部動畫彈框

立即預約 立即預約 wxss index.wxss 模態框 modals cancel bottom dialog body 動畫前初始位置 bottom pos yuyue yuyue to js 獲取應用例項 page 顯示遮罩層 showmodal function var animation...

元件封裝 微信小程式 底部彈框

模仿ios瀏覽器底部彈框效果。遮罩層淡入淡出，彈框高度根據內容自適應。popup bottom.js component data ready function this.setdata methods bind this 0 onshow function this.data animation....

微信小程式底部彈窗動畫

第一步，在元件裡編寫彈窗的 view class bottommodel wx if catchtouchmove tocatch view view class fixedmodel wx if animation view class wraps view class fixedtitle vi...