小程式實現 點選加入購物車 紅點拋物線飄入
阿新 • • 發佈:2018-10-31
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); }