本文例項為大家分享了微信小程式實現加入購物車滑動軌跡的具體程式碼，供大家參考，具體內容如下

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);

 },})

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。