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


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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
浅谈js中的this问题
Aug 31 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue实现登录拦截
Jun 29 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python的exec、eval使用分析
2017/12/11 Python
python递归全排列实现方法
2018/08/18 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python字符串下标与切片及使用方法
2020/02/13 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
编写strcpy函数
2014/06/24 面试题
生产内勤岗位职责
2013/12/07 职场文书
《长城》教学反思
2014/02/14 职场文书
中国入世承诺
2014/04/01 职场文书
应届毕业生求职信
2014/05/26 职场文书
交通志愿者活动总结
2014/06/27 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
文明上网主题班会
2015/08/14 职场文书