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


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 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
PHP PDO操作总结
Nov 17 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
jquery实现手风琴案例
May 04 jQuery
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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
详解Python中的日志模块logging
2015/06/19 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
应届生.NET方向面试题
2015/05/23 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
小学生元旦广播稿
2014/02/21 职场文书
音乐节策划方案
2014/06/09 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python