转盘抽奖小程序_Vue完成购物小球抛物线的方法实

日期:2021-01-04 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

Vue实现购物小球抛物线的方法实例       这篇文章主要给大家介绍了Vue实现购物小球抛物线的方法实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文介绍的是利用Vue实现购物小球抛物线的相关内容,下面话不多说了,来一起看看详细的介绍吧

css片段

 .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); /*贝塞尔曲线*/
 .inner{
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background-color: rgb(0,160,220);
 transition: all 0.4s linear;
 .cart{
 position: fixed;
 bottom: 22px;
 left: 32px;
 width: 30px;
 height: 30px;
 background-color: rgb(0,160,220);
 color: rgb(255,255,255);

div v-for="ball in balls" transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" div v-show="ball.show" div /div /div /transition /div /div /div

js片段

 script 
 new Vue({
 el:"#app",
 data:{
 count: 0,
 items:[
 text: "苹果",
 price: 15
 text: "香蕉",
 price: 15
 balls: [ //小球 设为3个
 show: false
 show: false
 show: false
 dropBalls:[],
 methods:{
 additem(event){
 this.drop(event.target);
 this.count ++;
 drop(el){ //抛物
 for(let i=0;i this.balls.length;i++){
 let ball= this.balls[i];
 if(!ball.show){
 ball.show = true;
 ball.el=el;
 this.dropBalls.push(ball);
 return;
 beforeDrop(el) {/* 购物车小球动画实现 */
 let count = this.balls.length;
 while (count--) {
 let ball = this.balls[count];
 if (ball.show) {
 let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
 let x = rect.left - 32;
 let y = -(window.innerHeight - rect.top - 22); //获取y
 el.style.display = '';
 el.style.webkitTransform = 'translateY('+y+'px)'; //translateY
 el.style.transform = 'translateY('+y+'px)';
 let inner = el.getElementsByClassName('inner-hook')[0];
 inner.style.webkitTransform = 'translateX('+x+'px)';
 inner.style.transform = 'translateX('+x+'px)';
 dropping(el, done) { /*重置小球数量 样式重置*/
 let rf = el.offsetHeight;
 el.style.webkitTransform = 'translate3d(0,0,0)';
 el.style.transform = 'translate3d(0,0,0)';
 let inner = el.getElementsByClassName('inner-hook')[0];
 inner.style.webkitTransform = 'translate3d(0,0,0)';
 inner.style.transform = 'translate3d(0,0,0)';
 el.addEventListener('transitionend', done);
 afterDrop(el) { /*初始化小球*/
 let ball = this.dropBalls.shift();
 if (ball) {
 ball.show=false;
 el.style.display = 'none';
 /script 

transtion属性可以查看官方文档,具体位置可以通过调试获得。

到此这篇关于Vue实现购物小球抛物线的文章就介绍到这了,更多相关Vue购物小球抛物线内容请搜索凡科以前的文章或继续浏览下面的