小程序实现 点击加入购物车 红点抛物线飘入

http://ledc.cn/article/9

 

 

小程序实现 点击加入购物车 红点抛物线飘入

实现效果

1、index.wxss

1 2 3 4 5 6 7 8 9 10 11

.good_box { width: 30rpx; height: 30rpx; position: fixed; border-radius: 50%; overflow: hidden; left: 50%; top: 50%; z-index: 99; background: #b02c41; }

2、index.wxml

1 2 3

<view class="good_box" hidden="{{hide_good_box}}"  style="left: {{bus_x}}px; top: {{bus_y}}px;"></view> <!-- 点击加  点击事件 --> <view class="add" bindtap="touchOnGoods">+</view>

3、app.js 里面加入

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

//获取屏幕[宽、高] 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 }; },

4、app.js的onLaunch里面加入

1 2	//贝塞尔曲线 this.screenSize();

5、index.js加入

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

data: { hide_good_box: true, }, onLoad: function (options) { this.busPos = {}; this.busPos['x'] = app.globalData.ww/2; this.busPos['y'] = app.globalData.hh - 10; console.log('购物车坐标',this.busPos) }, 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); },