支付宝小程序商品加入购物车动画

思路：一个盒子做匀速运动，盒子里的小球做变速运动

js
Page({data: {tran: [ ],//传参//1小球纵向移动距离//0小球横向移动距离//2//购物车宽度clientY: 0,//点击位置y坐标cartX: 0,//购物车左边位置cartY: 0,//购物车图表上边位置list: [{ name: '商品1' }, { name: '商品2' }, { name: '商品3' }],width: 0,//购物车宽show: false,flag: false,},onLoad() {},onReady() {my.createSelectorQuery()//获取动态点坐标,作为动画初始值.select('#cart').boundingClientRect().exec((ret) => {console.log(ret)//动态点位置信息this.setData({cartX: ret[0].left,cartY: ret[0].top,width: ret[0].width,})})},add(e) {if (this.data.flag) {return;}let that = thislet 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({//圆点就为tran,position,show: true,flag: true,}, () => {this.init.init()//使用子组件中自定义事件})//动画结束执行数据回归初始化setTimeout(function () {that.setData({show: false,flag: false})}, 1000)},flyCart(ref) {//获取组件实例console.log(ref)this.init = ref},cart(e) {console.log(e.detail)}
});

///html
<view class="one" a:for="{{list}}"><text>{{item.name}}</text><view class="pot"><text style="font-size:28px;padding:5px 30px;" onTap="add" ref="flyCart" >+</text></view>
</view><view class="btn"><my-component7 ref="flyCart"tranY="{{tranY}}" show="{{show}}"tran="{{tran}}"position="{{position}}"/><text id="cart" onTap="cart">购物车</text>
</view>

///css
.one{display: flex;align-items: center;justify-content: space-between;
}
page{background: #fff;
}.btn{position: fixed;background: #999;bottom:40px;left: 5px;}.box{width: 10px;height:10px;border-radius: 10px;/* border: 1px solid #999; */position: absolute;}
.dian{width: 10px;height:10px;background: red;border-radius: 10px;
}

运动组件在附件

支付宝小程序商品加入购物车动画相关推荐

java代码实现购物车小程序_使用Taro实现小程序商城的购物车功能模块的实例代码...
Taro 是一套遵循 React 语法规范的多端开发解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的 ...
互联网日报 | 3月20日星期六 | 荣耀CEO赵明谈发展目标；家乐福中国未来谋求独立上市；微盟开放接入支付宝小程序能力...
今日看点 ✦ 国家网信办:我国网民规模增加至9.89亿,互联网普及率达70.4% ✦ 荣耀CEO赵明谈发展目标:达到千亿规模,成为世界500强 ✦ 家乐福中国回应"50%以上股权或被苏宁出售 ...
商家又一必争之地！支付宝小程序一周年，带来哪些机遇？
如果说2017年是小程序元年,那么2018年很可能将成为小程序的爆发年. 微信小程序.支付宝小程序.百度智能小程序,BAT三大巨头全面进入小程序赛道,华为.vivo.小米等九大国产手机厂商还在今年春天 ...
h5 bootstrap 小程序模板_汉中餐饮行业支付宝小程序模板
汉中餐饮行业支付宝小程序模板 r2y8w85 汉中餐饮行业支付宝小程序模板在上,都能够开设自身的美妆旗舰店,根据这类方法开展精细化的服务,随后去一些线下用户流量.命名合适的小程序名称商城在搭建过程之 ...
基于支付宝小程序合成海报
合成海报是活动.商品分享中比较常用的功能.之前在微信小程序中经常实现,最近由于项目需要,在支付宝小程序中也实现了该功能.实现流程大同小异,但由于是两个生态的物种,所以也有个别地方需要注意,在此记录. ...
支付宝小程序-基础入门技能汇总
支付宝小程序-基础入门技能汇总开发前必知页面级常用配置常用列表渲染空标签事件图片引入 css背景图自定义组件开发工具 vscode 工具底部导航开发前必知 ● css单位用rpx ...
uni-app实现微信小程序，支付宝小程序，微信、支付宝、银联多商户收款
uni-app实现微信小程序,支付宝小程序,微信.支付宝.银联多商户收款前言前言哈哈哈,这个标题起得有点啰嗦.不过内容还是很真实有效的. 先说下需求吧.就是用户通过扫小程序码.实现微信app扫进 ...
有了这些DEMO，开发支付宝小程序SO Easy！
相比于APP,小程序已经大大降低了开发者们的学习和开发的门槛.而如何进一步提高小程序开发者的学习和开发效率,一直是支付宝小程序团队非常重视的课题. 对于开发者而言, 文档可以提供基础的引导,而针对性的 ...
小程序开发过程中常见问题[微信小程序、支付宝小程序]
小程序开发过程中常见问题[微信小程序.支付宝小程序] 正文一.样式中如何使用background-image呢? background-image支持网络的图片链接或者base64 二.使用自适应单 ...

支付宝小程序商品加入购物车动画

支付宝小程序商品加入购物车动画相关推荐

最新文章

热门文章