支付寶小程式商品加入購物車動畫

2021-10-24 21:26:03 字數 1502 閱讀 2127

思路:乙個盒子做勻速運動,盒子裡的小球做變速運動

js

page(,

,], width:0,

//購物車寬

show:

false

, flag:

false,}

,onload()

,onready()

)})}

,add

(e)let that =

this

let tran =

[e.detail.clientx, e.detail.clienty -

this

.data.carty,

this

.data.width]

//傳參,運動引數橫向距離,總想距離,購物車寬度

let position=

[e.detail.clientx -

this

.data.cartx,e.detail.clienty -

this

.data.carty]

//傳參,小球運動起點位置

console.

log(tran,position)

this

.setdata(,

()=>

)//動畫結束執行資料回歸初始化

settimeout

(function()

)},1000)}

,flycart

(ref)

,cart

(e)}

);

///html

="one" a:

for=

"}">

}<

/text>

="pot"

>

"font-size:28px;padding:5px 30px;" ontap=

"add" ref=

"flycart"

>

+<

/text>

<

/view>

<

/view>

="btn"

>

"flycart"

trany=

"}"

show=

"}" tran=

"}" position=

"}"/

>

"cart" ontap=

"cart"

>購物車<

/text>

<

/view>

///css

.one

page

.btn

.box

.dian

運動元件在附件

swift 商品加入購物車動畫

mark 商品拋入購物車的動畫效果 extension qhgoodlistviewcontroller 組動畫 groupanimation 組動畫 幀動畫拋入購物車 並放大 縮小圖層增加點動效 private func groupanimation 動畫結束後做一些操作 override fun...

小程式商城 將商品加入購物車快取

js 新增購物車事件方法 tocart function event else this.animation animation animation.translatey 336 step this.setdata 將購物車資料新增到快取 var that this 獲取快取中的已新增購物車資訊 v...

購物車小程式

coding utf 8 shp iphone 5000 offee 35 shoes 800 pric list e int input 請輸入賬戶金額 while true for i,p in enumerate shp print i,p 0 p 1 enther input 請輸入要購買的...