微信小程序实现加入购物车滑动轨迹


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现加入购物车滑动轨迹的具体代码,供大家参考,具体内容如下

微信小程序实现加入购物车滑动轨迹

index.wxss

.good_box {
 width: 80rpx;
 height: 80rpx;
 position: fixed;
 border-radius: 50%;
 overflow: hidden;
 left: 50%;
 top: 50%;
 z-index: 99;
}

index.wxml

<view class="iconfont icongouwuche recommend_item_shopcar" bindtap="touchOnGoods"></view>
<view class="good_box" hidden="{{hide_good_box}}" style="left: {{bus_x}}px; top: {{bus_y}}px;">
 <image class="image" src="/img/luntai2.png"></image>
</view>

**app.js **

//app.js
App({
 onLaunch: function() {
 //调用API从本地缓存中获取数据
 // var logs = wx.getStorageSync('logs') || []
 // logs.unshift(Date.now())
 // wx.setStorageSync('logs', logs)
 this.screenSize();
 },
 getUserInfo: function(cb) {
 var that = this
 if (this.globalData.userInfo) {
  typeof cb == "function" && cb(this.globalData.userInfo)
 } else {
  //调用登录接口
  wx.login({
  success: function() {
   wx.getUserInfo({
   success: function(res) {
    that.globalData.userInfo = res.userInfo
    typeof cb == "function" && cb(that.globalData.userInfo)
   }
   })
  }
  })
 }
 },
 //获取屏幕[宽、高]

 screenSize: function() {
 var that = this;
 wx.getSystemInfo({
  success: function(res) {
  that.globalData.ww = res.windowWidth;
  that.globalData.hh = res.windowHeight;
  }

 })

 },

 /**
 
  * @param sx 起始点x坐标 
  * @param sy 起始点y坐标 
  * @param cx 控制点x坐标 
  * @param cy 控制点y坐标 
  * @param ex 结束点x坐标 
  * @param ey 结束点y坐标 
  * @param part 将起始点到控制点的线段分成的份数,数值越高,计算出的曲线越精确 
  * @return 贝塞尔曲线坐标
 
  */

 bezier: function(points, part) {

 let sx = points[0]['x'];
 let sy = points[0]['y'];
 let cx = points[1]['x'];
 let cy = points[1]['y'];
 let ex = points[2]['x'];
 let ey = points[2]['y'];
 var bezier_points = [];

 // 起始点到控制点的x和y每次的增量
 var changeX1 = (cx - sx) / part;
 var changeY1 = (cy - sy) / part;

 // 控制点到结束点的x和y每次的增量
 var changeX2 = (ex - cx) / part;
 var changeY2 = (ey - cy) / part;

 //循环计算
 for (var i = 0; i <= part; i++) {
  // 计算两个动点的坐标

  var qx1 = sx + changeX1 * i;
  var qy1 = sy + changeY1 * i;
  var qx2 = cx + changeX2 * i;
  var qy2 = cy + changeY2 * i;

  // 计算得到此时的一个贝塞尔曲线上的点
  var lastX = qx1 + (qx2 - qx1) * i / part;
  var lastY = qy1 + (qy2 - qy1) * i / part;

  // 保存点坐标
  var point = {};
  point['x'] = lastX;
  point['y'] = lastY;
  bezier_points.push(point);

 }

 //console.log(bezier_points)
 return {
  'bezier_points': bezier_points

 };

 },
 globalData: {
 ww:'',
 hh:''
 }
})

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
 data: {
 indicatorDots: true,
 vertical: false,
 autoplay: false,
 interval: 2000,
 duration: 500,
 hide_good_box: true,
 },
 onLoad: function () {
 this.busPos = {};

 this.busPos['x'] = app.globalData.ww / 1.4; //1.4修改轨迹结束时x轴的位置,2是在正中心

 this.busPos['y'] = app.globalData.hh - 10;

 console.log('购物车坐标', this.busPos)
 },
 onShow(){
 app.editTabBar(); //显示自定义的底部导航
 },
 tosearchpage(e){
 wx.navigateTo({
  url: '',
 })
 },
 touchOnGoods: function (e) {
 // 如果good_box正在运动
 if (!this.data.hide_good_box) return;
 this.finger = {};
 var topPoint = {};
 this.finger['x'] = e.touches["0"].clientX;
 this.finger['y'] = e.touches["0"].clientY;

 if (this.finger['y'] < this.busPos['y']) {
  topPoint['y'] = this.finger['y'] - 150;
 } else {
  topPoint['y'] = this.busPos['y'] - 150;

 }
 topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2;
 if (this.finger['x'] > this.busPos['x']) {
  topPoint['x'] = (this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x'];
 } else {
  topPoint['x'] = (this.busPos['x'] - this.finger['x']) / 2 + this.finger['x'];

 }

 this.linePos = app.bezier([this.finger, topPoint, this.busPos], 20);
 this.startAnimation();

 },

 startAnimation: function () {
 var index = 0,
  that = this,
  bezier_points = that.linePos['bezier_points'],
  len = bezier_points.length - 1;
 this.setData({

  hide_good_box: false,
  bus_x: that.finger['x'],
  bus_y: that.finger['y']

 })

 this.timer = setInterval(function () {
  index++;
  that.setData({
  bus_x: bezier_points[index]['x'],
  bus_y: bezier_points[index]['y']
  })

  if (index >= len) {
  clearInterval(that.timer);
  that.setData({
   hide_good_box: true,

  })

  }

 }, 15);

 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vuex实现购物车功能
Jun 28 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 #Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
js查找父节点的简单方法
2008/06/28 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
解决DataFrame排序sort的问题
2018/06/07 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
环保小标语
2014/06/13 职场文书
教师节慰问信
2015/02/15 职场文书
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang