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


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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 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 正则匹配函数体
2009/08/25 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
init进程的作用
2012/04/12 面试题
日语专业毕业生求职信
2013/12/04 职场文书
党员自我评价分享
2013/12/13 职场文书
饭店工作计划书
2014/01/10 职场文书
英文求职信写作小建议
2014/02/16 职场文书
八一建军节感言
2014/02/28 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python