Shulou(Shulou.com)06/01 Report--

This article Xiaobian for you to introduce in detail "Vue how to achieve the shopping ball parabola", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue how to achieve the shopping ball parabola" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

An example of the method of realizing Parabola of Shopping Ball in Vue

Html fragment

{{item.text}}

{{item.price}}

Add

{{count}}

Css fragment

.shop {

Position: fixed

Top: 300px

Left: 40px

}

.ball {

Position: fixed

Left: 32px

Bottom: 22px

Z-index: 200

Transition: all 0.4s cubic-bezier (0.49,-0.29,0.75,0.41); / * Bezier curve * /

}

.inner {

Width: 16px

Height: 16px

Border-radius: 50%

Background-color: rgb (0160220)

Transition: all 0.4s linear

}

.cart {

Position: fixed

Bottom: 22px

Left: 32px

Width: 30px

Height: 30px

Background-color: rgb (0160220)

Color: rgb (255255255)

}

Js fragment

New Vue ({

El: "# app"

Data: {

Count: 0

Items: [

{

Text: Apple

Price: 15

}

{

Text: banana

Price: 15

}

]

Balls: [/ / set the ball to 3

{

Show: false

}

{

Show: false

}

{

Show: false

}

]

DropBalls: []

}

Methods: {

Additem (event) {

This.drop (event.target)

This.count + +

}

Drop (el) {/ / Parabolic

For (let iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.