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


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 相关文章推荐
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 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 rsa加密解密使用详解
2015/01/14 PHP
php操作MongoDB类实例
2015/06/17 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php自动加载方式集合
2016/04/04 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
js常见遍历操作小结
2019/06/06 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python的Lambda函数用法详解
2019/09/03 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android