Uniapp实现加入购物车抛物线效果

上面是效果图,具体代码如下:

html

<template><view id="test"><view>            <!-- 内容 --><view class="flex"><scroll-view scroll-y scroll-with-animation style="height:calc(100vh - 400upx)"><!-- 左边 --><view class="flex-sub bg-pink"><view :class="index == curListIndex ? 'true': 'false'" @tap="goAnchor"  :data-id="item.id" class="padding-tb-sm" v-for="(item, index) in leftNav" :key="index"><text>{{item.name}}</text></view></view></scroll-view><scroll-view scroll-y scroll-with-animation style="height:calc(100vh - 400upx)" :scroll-into-view="'main-'+ mainCur" @scroll="noScroll"><!-- 右边 --><view class="flex-sub bg-red"><view v-for="(item, index) in rightNav" :key="index" :id="'main-'+ index"><view style="height: 260upx; background-color: #023C41;"><view><text>{{item.name}}</text></view><view class="flex justify-end text-center text-content"><view class="item bg-blue"  :class="rightListSum[index].delAnimation ? 'delRightShoppingCardAnimations' : 'delLeftShoppingCardAnimations'" v-if="rightListSum[index].showDel" @click="delShoppingCard(index)"><text>-</text></view><view style="width: 60upx;" v-if="rightListSum[index].showDel"><text>{{rightListSum[index].sum}}</text></view><view class="item bg-blue" :data-index="index" @click="addShoppingCard"><text>+</text></view></view></view><view class="gray_big_line"></view></view></view></scroll-view><!-- 小球动画 --><view :animation="animationY" :style="'position:fixed;top:' + ballY + 'px;'" v-if="showBall"><view class="ball" :animation="animationX" :style="'position:fixed;left:' + ballX + 'px;'"><image src="../../static/james.jpeg" mode=""></image></view></view></view><!-- 底部导航栏 --><view style="position: fixed; bottom: 0; height: 85upx; width: 100%; background-color: #CCCCCC;"><view v-if="showShoppingCart" :class="shoppingCartAnimation? 'shoppingCartAnimations' : '' " style="margin-left: 64rpx;width: 85upx;height: 85upx; border-radius: 100%;background-color: red;"></view></view></view></view>
</template>

script

<script>export default {data() {return {rightListSum: [{showDel: false,delAnimation: false, // 删除动画sum: 0,}],alreadyLike: require('@/static/james.jpeg'),showShoppingCart: true, // 购物车显示shoppingCartAnimation: false, // 购物车动画showBall: false, // 小球是否显示animationY: '', // 动画YanimationX: '', // 动画XballY: '', // 小球当前位置YballX: '', // 小球当前位置XleftNav: [{name: 'leftNav菜单1',id: 0},{name: 'leftNav菜单2',id: 1},{name: 'leftNav菜单3',id: 2},{name: 'leftNav菜单4',id: 3},{name: 'leftNav菜单5',id: 4}],rightNav: [{name: 'rightNav菜单1',id: 0},{name: 'rightNav菜单2',id: 1},{name: 'rightNav菜单3',id: 2},{name: 'rightNav菜单4',id: 3},{name: 'rightNav菜单5',id: 4},{name: 'rightNav菜单6',id: 5},{name: 'rightNav菜单7',id: 6}],curListIndex: 0,mainCur: 0,listHeight: [], // 左边列表高度scrollY: ''}},onLoad(option) {console.log('onLoad')this.calculateHeight()},onReady() {// 接口返回// this.calculateHeight()},onShow() {},methods: {// 删除购物车async delShoppingCard(index) {console.log(index)if (this.rightListSum[index].sum-1 <= 0) {this.rightListSum[index].sum = this.rightListSum[index].sum - 1this.rightListSum[index].delAnimation = falsethis.setDelayTime(100).then(() => {this.rightListSum[index].showDel = false})} else {this.rightListSum[index].sum = this.rightListSum[index].sum - 1}},// 添加购物车addShoppingCard(e){console.log(e)let index = e.currentTarget.dataset.indexthis.rightListSum[index].sum = this.rightListSum[index].sum + 1this.rightListSum[index].delAnimation = truethis.rightListSum[index].showDel = true// x, y表示手指点击横纵坐标, 即小球的起始坐标let ballX = e.detail.x,ballY = e.detail.y;this.createAnimation(ballX, ballY);},// 延迟执行setDelayTime(sec) {return new Promise((resolve, reject) => {setTimeout(() => {resolve()}, sec)});},// 创建动画createAnimation(ballX, ballY) {uni.getSystemInfo({success: async (e) => {// var bottomX = e.windowWidth; // 结束位置Xvar bottomX = 50; // 结束位置Xvar bottomY = e.windowHeight - 50; // 结束位置Yvar animationX = this.flyX(bottomX, ballX); // 创建小球水平动画var animationY = this.flyY(bottomY, ballY); // 创建小球垂直动画this.ballX = ballX; // 小球当前位置Xthis.ballY = ballY; // 小球当前位置Ythis.showBall = true; // 显示小球this.setDelayTime(100).then(() => {this.animationX = animationX.export(); // 执行动画Xthis.animationY = animationY.export(); // 执行动画Y// 400ms延时, 即小球的抛物线时长return this.setDelayTime(400);}).then(() => {this.animationX = this.flyX(0, 0, 0).export(); // 执行动画Xthis.animationY = this.flyY(0, 0, 0).export(); // 执行动画Ythis.showBall = false; // 隐藏小球this.shoppingCartAnimation =  true // 购物车动画// 400ms延时, 即小球的抛物线时长return this.setDelayTime(400);}).then(() => {this.shoppingCartAnimation =  false // 购物车动画})}})},// 水平动画flyX(bottomX, ballX, duration) {/*** bottomX 结束位置* ballX 开始位置* duration 动画持续时间*/let animation = uni.createAnimation({duration: duration || 400,timingFunction: 'linear',})animation.translateX(bottomX-ballX).step(); // 动画效果return animation;},// 垂直动画flyY(bottomY, ballY, duration) {/*** bottomY 结束位置* ballY 开始位置* duration 动画持续时间*/let animation = uni.createAnimation({duration: duration || 400,timingFunction: 'ease-in',})console.log(bottomY)animation.translateY(bottomY-ballY).step(); // 动画效果return animation;},// 滑动noScroll(e) {// console.log(e)console.log(e.detail.scrollTop)this.scrollY = e.detail.scrollTop + 20// 当滚动到顶部if (this.scrollY < 0) {this.curListIndex = 0// this.mainCur = 0return true}// 在中间部分滚动for (let i = 0; i < this.listHeight.length - 1; i++) {let height = this.listHeight[i]// 思路 拿数组里面的开始、结束 值进行范围比较if (this.scrollY > height.start && this.scrollY < height.end) {console.log('-----------合格----------')console.log(this.listHeight[i])this.curListIndex = i// this.mainCur = i}}},// 左边导航栏点击goAnchor(e) {console.log(e)console.log(e.currentTarget.dataset.id)this.curListIndex = e.currentTarget.dataset.id // 下标选中this.mainCur = e.currentTarget.dataset.id // 右边锚点console.log(this.mainCur)},// 计算每个左边区块的高度calculateHeight() {let list = this.rightNavlet tabHeight = 0;for (let i = 0; i < list.length; i++) {const query = uni.createSelectorQuery().in(this);// console.log(query)query.select("#main-" + i).boundingClientRect(data => {// console.log(data);// console.log(data.height);let res = {}res.start = tabHeight // 开始高度tabHeight = tabHeight + data.height;res.end = tabHeight // 结束高度this.listHeight.push(res)}).exec();let rightListSum = {showDel: false,delAnimation: false, // 删除动画sum: 0,}this.rightListSum.push(rightListSum)}console.log(this.listHeight)console.log(this.rightListSum)// let view = uni.createSelectorQuery().select("#main-" + 5);// console.log(view)// view.fields({//    size: true// }, data => {//     console.log(data)// }).exec();}}}
</script>

style

<style>.flex{display: flex;}
.true {border: 8rpx solid red;
}
.false {border: 2rpx solid #ccc;
}
.item {width:50rpx;height: 50rpx;border-radius: 100%;
}
/* 购物车动画 */
.shoppingCartAnimations {animation: shoppingCartAnimation 1s;
}
@keyframes shoppingCartAnimation {0% {opacity: 0;transform: scale3d(.3,.3,.3)}20% {transform: scale3d(1.1,1.1,1.1)}40% {transform: scale3d(.9,.9,.9)}60% {opacity: 1;transform: scale3d(1.03,1.03,1.03)}80% {transform: scale3d(.97,.97,.97)}to {opacity: 1;transform: scaleX(1)}
}
.but {margin: 10rpx;height: 60rpx;width: 80rpx;display: flex;
}
.ball {height: 40rpx;width: 40rpx;border-radius: 50%;position: fixed;
}
.ball image{width: 100%;height: 100%;
}
/* 从右到左 */
.delRightShoppingCardAnimations {animation: delRightShoppingCardAnimation .5s;
}
@keyframes delRightShoppingCardAnimation {from {transform: translateX(100rpx) rotate(900deg);animation-timing-function: linear;}to {transform: translateX(0rpx) rotate(0);}
}
/* 从左到右 */
.delLeftShoppingCardAnimations {animation: delLeftShoppingCardAnimation .5s;
}
@keyframes delLeftShoppingCardAnimation {from {transform: translateX(0rpx) rotate(0);}to {transform: translateX(100rpx) rotate(900deg);animation-timing-function: linear;}
}
</style>

Uniapp实现加入购物车抛物线效果相关推荐

实现加入购物车抛物线效果
写在前面最近天气刚刚转热,心想应该淘点春装卖卖骚了,然后某宝逛的时候发现其加入购物车的动画效果不错,既完善了交互,又有功能导向作用,用户体验杠杠滴-作为一名前端汪,也想自己动手实现下此类酷炫的效果. ...
jQuery.fly插件实现添加购物车抛物线效果
样例使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
基于jquery fly插件实现加入购物车抛物线动画效果
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
Android之实现京东底部添加到购物车的效果
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/50992567 本文出自:[顾林海的博客] ##前言美好的双休日快要结 ...
android 抛物线轨迹,Android用Animation实现完整的抛物线效果
最近需求要做一个小球上升再下降的抛物线运动,类似太阳东升西落的动画. 在网上找了好久,好多的抛物线都是平抛,用于购物车添加效果. 于是自己动手,做了一个完整的向上抛物线的动画. 首先要区分两个概念,一 ...
仿饿了么购物车下单效果
文章目录仿饿了么购物车下单效果效果图如下主要的功能主要功能实现分类及商品及购物车里面商品数量的联动效果底部购物车商品列表添加商品是有0到1,减少商品有1到0动画效果下单动画仿饿了么购 ...
uni-app/Vue实现购物车页面功能的业务逻辑
uni-app/Vue实现购物车页面功能的业务逻辑用户在商品列表页或者商品详情页进行添加到购物车操作.把此商品需要在购物车渲染的数据整理好一个对象,转存到Vuex中在购物车页面渲染列表数据购物 ...
【Unity】结合DoTween制作抛物线效果
[Unity] 结合DoTween制作抛物线效果概要 public partial class EMath {public static Vector3 Parabola(Vector3 start ...
小程序uniapp实现左滑删除效果
小程序uniapp实现左滑删除效果实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 < ...
【Axure交互教程】购物车结算效果
作品名称:滑动拼图验证登录效果作品编号:Case010 软件版本:Axure9 作品类型:交互案例今天我们制作的是移动端的购物车结算效果,主要涉及的是中继器的使用,全选以及数量的计算. 原型预览链 ...

Uniapp实现加入购物车抛物线效果

Uniapp实现加入购物车抛物线效果相关推荐

最新文章

热门文章