1. 程式人生 > >小程式實現 點選加入購物車 紅點拋物線飄入

小程式實現 點選加入購物車 紅點拋物線飄入

1:實現效果;

 

2:index.wxss

//只寫紅點樣式
.good_box {
  width: 30rpx;
  height: 30rpx;
  position: fixed;
  border-radius: 50%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  z-index: 99; 
  background: #b02c41;
} 

3:index.wxml

  <!-- 點選加  點選事件 -->
<image catchtap='middlejia' data-indexOut="{{indexOut}}" data-indexIn="{{indexIn}}" style='background:#cb003c;' src='../../image/imgs/plus.png'></image>  
 
  <!-- 飛入圖示 -->
 <view class="good_box" hidden="{{hide_good_box}}"  style="left: {{bus_x}}px; top{{bus_y}}px;"> 
  </view> 

4:app.js 裡面加入

onLaunch: function () { 
    let that = this;
    wx.getSystemInfo({// 獲取頁面的有關資訊
      success: function (res) {
        wx.setStorageSync('systemInfo', res)
        var ww = res.windowWidth;
        var hh = res.windowHeight;
        that.globalData.ww = ww;
        that.globalData.hh = hh;
      }
    });
  },
bezier: function (pots, amount) {
    var pot;
    var lines;
    var ret = [];
    var points;
    for (var i = 0; i <= amount; i++) {
      points = pots.slice(0);
      lines = [];
      while (pot = points.shift()) {
        if (points.length) {
          lines.push(pointLine([pot, points[0]], i / amount));
        } else if (lines.length > 1) {
          points = lines;
          lines = [];
        } else {
          break;
        }
      }
      ret.push(lines[0]);
    }
    function pointLine(points, rate) {
      var pointA, pointB, pointDistance, xDistance, yDistance, tan, radian, tmpPointDistance;
      var ret = [];
      pointA = points[0];//點選
      pointB = points[1];//中間
      xDistance = pointB.x - pointA.x;
      yDistance = pointB.y - pointA.y;
      pointDistance = Math.pow(Math.pow(xDistance, 2) + Math.pow(yDistance, 2), 1 / 2);
      tan = yDistance / xDistance;
      radian = Math.atan(tan);
      tmpPointDistance = pointDistance * rate;
      ret = {
        x: pointA.x + tmpPointDistance * Math.cos(radian),
        y: pointA.y + tmpPointDistance * Math.sin(radian)
      };
      return ret;
    }
    return {
      'bezier_points': ret
    };
  },

5:index.js

data: { 
    hide_good_box: true
  },
onLoad: function(res) {
    var that = this;
    this.busPos = {};
    this.busPos['x'] = 180;//購物車的位置
    this.busPos['y'] = app.globalData.hh - 56;
    }
 // 點選新增商品
  middlejia: function(e) { 
    var that=this;
     touchOnGoods(that, e);
  },


//呼叫的方法
function touchOnGoods(that, e) {
  that.finger = {}; var topPoint = {};
  that.finger['x'] = e.touches["0"].clientX;//點選的位置
  that.finger['y'] = e.touches["0"].clientY;

  if (that.finger['y'] < that.busPos['y']) {
    topPoint['y'] = that.finger['y'] - 150;
  } else {
    topPoint['y'] = that.busPos['y'] - 150;
  }
  topPoint['x'] = Math.abs(that.finger['x'] - that.busPos['x']) / 2;

  if (that.finger['x'] > that.busPos['x']) {
    topPoint['x'] = (that.finger['x'] - that.busPos['x']) / 2 + that.busPos['x'];
  } else {//
    topPoint['x'] = (that.busPos['x'] - that.finger['x']) / 2 + that.finger['x'];
  }
  that.linePos = app.bezier([that.busPos, topPoint, that.finger], 100);
  startAnimation(that, e);
}
function startAnimation(that, e) {
  var index = 0,
    bezier_points = that.linePos['bezier_points'];
  that.setData({
    hide_good_box: false,
    bus_x: that.finger['x'],
    bus_y: that.finger['y']
  })
  var len = bezier_points.length;
  index = len
  that.timer = setInterval(function () {
    for (let i = index - 1; i > -1; i--) {
      that.setData({
        bus_x: bezier_points[i]['x'],
        bus_y: bezier_points[i]['y']
      })
      if (i < 1) {
        clearInterval(that.timer);
        that.setData({
          hide_good_box: true
        })
      }
    }
  }, 25);
}