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

╰半夏微凉° 2022-01-21 07:07 415阅读 0赞

[http://ledc.cn/article/9][http_ledc.cn_article_9]

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

实现效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE_size_16_color_FFFFFF_t_70][]

1、index.wxss

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>.good_box&nbsp;{ </code> <code>width</code><code>:&nbsp;</code><code>30</code><code>rpx;</code> <code>height</code><code>:&nbsp;</code><code>30</code><code>rpx;</code> <code>position</code><code>:&nbsp;</code><code>fixed</code><code>;</code> <code>border-radius:&nbsp;</code><code>50%</code><code>;</code> <code>overflow</code><code>:&nbsp;</code><code>hidden</code><code>;</code> <code>left</code><code>:&nbsp;</code><code>50%</code><code>;</code> <code>top</code><code>:&nbsp;</code><code>50%</code><code>;</code> <code>z-index</code><code>:&nbsp;</code><code>99</code><code>;</code> <code>background</code><code>:&nbsp;</code><code>#b02c41</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

2、index.wxml

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;</code><code>view</code>&nbsp;<code>class</code><code>=</code><code>"good_box"</code>&nbsp;<code>hidden</code><code>=</code><code>"{ {hide_good_box}}"</code>&nbsp;&nbsp;<code>style</code><code>=</code><code>"left:&nbsp;{ {bus_x}}px;&nbsp;top:&nbsp;{ {bus_y}}px;"</code><code>&gt;&lt;/</code><code>view</code><code>&gt;</code> <code>&lt;!--&nbsp;点击加&nbsp;&nbsp;点击事件&nbsp;--&gt;</code> <code>&lt;</code><code>view</code>&nbsp;<code>class</code><code>=</code><code>"add"</code>&nbsp;<code>bindtap</code><code>=</code><code>"touchOnGoods"</code><code>&gt;+&lt;/</code><code>view</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

3、app.js 里面加入

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>//获取屏幕[宽、高]</code> <code>screenSize:&nbsp;</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>var</code>&nbsp;<code>that&nbsp;=&nbsp;</code><code>this</code><code>;</code> <code>wx.getSystemInfo({ </code> <code>success:&nbsp;</code><code>function</code>&nbsp;<code>(res)&nbsp;{ </code> <code>that.globalData.ww&nbsp;=&nbsp;res.windowWidth;</code> <code>that.globalData.hh&nbsp;=&nbsp;res.windowHeight;</code> <code>}</code> <code>})</code> <code>},</code> <code>/**</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;sx&nbsp;起始点x坐标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;sy&nbsp;起始点y坐标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;cx&nbsp;控制点x坐标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;cy&nbsp;控制点y坐标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;ex&nbsp;结束点x坐标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;ey&nbsp;结束点y坐标</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@param&nbsp;part&nbsp;将起始点到控制点的线段分成的份数，数值越高，计算出的曲线越精确</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*&nbsp;@return&nbsp;贝塞尔曲线坐标</code> <code>&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>bezier:&nbsp;</code><code>function</code>&nbsp;<code>(points,&nbsp;part)&nbsp;{ </code> <code>let&nbsp;sx&nbsp;=&nbsp;points[0][</code><code>'x'</code><code>];</code> <code>let&nbsp;sy&nbsp;=&nbsp;points[0][</code><code>'y'</code><code>];</code> <code>let&nbsp;cx&nbsp;=&nbsp;points[1][</code><code>'x'</code><code>];</code> <code>let&nbsp;cy&nbsp;=&nbsp;points[1][</code><code>'y'</code><code>];</code> <code>let&nbsp;ex&nbsp;=&nbsp;points[2][</code><code>'x'</code><code>];</code> <code>let&nbsp;ey&nbsp;=&nbsp;points[2][</code><code>'y'</code><code>];</code> <code>var</code>&nbsp;<code>bezier_points&nbsp;=&nbsp;[];</code> <code>//&nbsp;起始点到控制点的x和y每次的增量</code> <code>var</code>&nbsp;<code>changeX1&nbsp;=&nbsp;(cx&nbsp;-&nbsp;sx)&nbsp;/&nbsp;part;</code> <code>var</code>&nbsp;<code>changeY1&nbsp;=&nbsp;(cy&nbsp;-&nbsp;sy)&nbsp;/&nbsp;part;</code> <code>//&nbsp;控制点到结束点的x和y每次的增量</code> <code>var</code>&nbsp;<code>changeX2&nbsp;=&nbsp;(ex&nbsp;-&nbsp;cx)&nbsp;/&nbsp;part;</code> <code>var</code>&nbsp;<code>changeY2&nbsp;=&nbsp;(ey&nbsp;-&nbsp;cy)&nbsp;/&nbsp;part;</code> <code>//循环计算</code> <code>for</code>&nbsp;<code>(</code><code>var</code>&nbsp;<code>i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;=&nbsp;part;&nbsp;i++)&nbsp;{ </code> <code>//&nbsp;计算两个动点的坐标</code> <code>var</code>&nbsp;<code>qx1&nbsp;=&nbsp;sx&nbsp;+&nbsp;changeX1&nbsp;*&nbsp;i;</code> <code>var</code>&nbsp;<code>qy1&nbsp;=&nbsp;sy&nbsp;+&nbsp;changeY1&nbsp;*&nbsp;i;</code> <code>var</code>&nbsp;<code>qx2&nbsp;=&nbsp;cx&nbsp;+&nbsp;changeX2&nbsp;*&nbsp;i;</code> <code>var</code>&nbsp;<code>qy2&nbsp;=&nbsp;cy&nbsp;+&nbsp;changeY2&nbsp;*&nbsp;i;</code> <code>//&nbsp;计算得到此时的一个贝塞尔曲线上的点</code> <code>var</code>&nbsp;<code>lastX&nbsp;=&nbsp;qx1&nbsp;+&nbsp;(qx2&nbsp;-&nbsp;qx1)&nbsp;*&nbsp;i&nbsp;/&nbsp;part;</code> <code>var</code>&nbsp;<code>lastY&nbsp;=&nbsp;qy1&nbsp;+&nbsp;(qy2&nbsp;-&nbsp;qy1)&nbsp;*&nbsp;i&nbsp;/&nbsp;part;</code> <code>//&nbsp;保存点坐标</code> <code>var</code>&nbsp;<code>point&nbsp;=&nbsp;{};</code> <code>point[</code><code>'x'</code><code>]&nbsp;=&nbsp;lastX;</code> <code>point[</code><code>'y'</code><code>]&nbsp;=&nbsp;lastY;</code> <code>bezier_points.push(point);</code> <code>}</code> <code>//console.log(bezier_points)</code> <code>return</code>&nbsp;<code>{ </code> <code>'bezier_points'</code><code>:&nbsp;bezier_points</code> <code>};</code> <code>},</code> </td> 
 </tr> 
 </tbody> 
</table>

4、app.js的onLaunch里面加入

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>//贝塞尔曲线</code> <code>this</code><code>.screenSize();</code> </td> 
 </tr> 
 </tbody> 
</table>

5、index.js加入

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>data:&nbsp;{ </code> <code>hide_good_box:&nbsp;</code><code>true</code><code>,</code> <code>},</code> <code>onLoad:&nbsp;</code><code>function</code>&nbsp;<code>(options)&nbsp;{ </code> <code>this</code><code>.busPos&nbsp;=&nbsp;{};</code> <code>this</code><code>.busPos[</code><code>'x'</code><code>]&nbsp;=&nbsp;app.globalData.ww/2;</code> <code>this</code><code>.busPos[</code><code>'y'</code><code>]&nbsp;=&nbsp;app.globalData.hh&nbsp;-&nbsp;10;</code> <code>console.log(</code><code>'购物车坐标'</code><code>,</code><code>this</code><code>.busPos)</code> <code>},</code> <code>touchOnGoods:&nbsp;</code><code>function</code>&nbsp;<code>(e)&nbsp;{ </code> <code>//&nbsp;如果good_box正在运动</code> <code>if</code>&nbsp;<code>(!</code><code>this</code><code>.data.hide_good_box)&nbsp;</code><code>return</code><code>;</code> <code>this</code><code>.finger&nbsp;=&nbsp;{};</code> <code>var</code>&nbsp;<code>topPoint&nbsp;=&nbsp;{};</code> <code>this</code><code>.finger[</code><code>'x'</code><code>]&nbsp;=&nbsp;e.touches[</code><code>"0"</code><code>].clientX;</code> <code>this</code><code>.finger[</code><code>'y'</code><code>]&nbsp;=&nbsp;e.touches[</code><code>"0"</code><code>].clientY;</code> <code>if</code>&nbsp;<code>(</code><code>this</code><code>.finger[</code><code>'y'</code><code>]&nbsp;&lt;&nbsp;</code><code>this</code><code>.busPos[</code><code>'y'</code><code>])&nbsp;{ </code> <code>topPoint[</code><code>'y'</code><code>]&nbsp;=&nbsp;</code><code>this</code><code>.finger[</code><code>'y'</code><code>]&nbsp;-&nbsp;150;</code> <code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>topPoint[</code><code>'y'</code><code>]&nbsp;=&nbsp;</code><code>this</code><code>.busPos[</code><code>'y'</code><code>]&nbsp;-&nbsp;150;</code> <code>}</code> <code>topPoint[</code><code>'x'</code><code>]&nbsp;=&nbsp;Math.abs(</code><code>this</code><code>.finger[</code><code>'x'</code><code>]&nbsp;-&nbsp;</code><code>this</code><code>.busPos[</code><code>'x'</code><code>])&nbsp;/&nbsp;2;</code> <code>if</code>&nbsp;<code>(</code><code>this</code><code>.finger[</code><code>'x'</code><code>]&nbsp;&gt;&nbsp;</code><code>this</code><code>.busPos[</code><code>'x'</code><code>])&nbsp;{ </code> <code>topPoint[</code><code>'x'</code><code>]&nbsp;=&nbsp;(</code><code>this</code><code>.finger[</code><code>'x'</code><code>]&nbsp;-&nbsp;</code><code>this</code><code>.busPos[</code><code>'x'</code><code>])&nbsp;/&nbsp;2&nbsp;+&nbsp;</code><code>this</code><code>.busPos[</code><code>'x'</code><code>];</code> <code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>topPoint[</code><code>'x'</code><code>]&nbsp;=&nbsp;(</code><code>this</code><code>.busPos[</code><code>'x'</code><code>]&nbsp;-&nbsp;</code><code>this</code><code>.finger[</code><code>'x'</code><code>])&nbsp;/&nbsp;2&nbsp;+&nbsp;</code><code>this</code><code>.finger[</code><code>'x'</code><code>];</code> <code>}</code> <code>this</code><code>.linePos&nbsp;=&nbsp;app.bezier([</code><code>this</code><code>.finger,&nbsp;topPoint,&nbsp;</code><code>this</code><code>.busPos],&nbsp;20);</code> <code>this</code><code>.startAnimation();</code> <code>},</code> <code>startAnimation:&nbsp;</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>var</code>&nbsp;<code>index&nbsp;=&nbsp;0,</code> <code>that&nbsp;=&nbsp;</code><code>this</code><code>,</code> <code>bezier_points&nbsp;=&nbsp;that.linePos[</code><code>'bezier_points'</code><code>],</code> <code>len&nbsp;=&nbsp;bezier_points.length&nbsp;-&nbsp;1;</code> <code>this</code><code>.setData({ </code> <code>hide_good_box:&nbsp;</code><code>false</code><code>,</code> <code>bus_x:&nbsp;that.finger[</code><code>'x'</code><code>],</code> <code>bus_y:&nbsp;that.finger[</code><code>'y'</code><code>]</code> <code>})</code> <code>this</code><code>.timer&nbsp;=&nbsp;setInterval(</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>index++;</code> <code>that.setData({ </code> <code>bus_x:&nbsp;bezier_points[index][</code><code>'x'</code><code>],</code> <code>bus_y:&nbsp;bezier_points[index][</code><code>'y'</code><code>]</code> <code>})</code> <code>if</code>&nbsp;<code>(index&nbsp;&gt;=&nbsp;len)&nbsp;{ </code> <code>clearInterval(that.timer);</code> <code>that.setData({ </code> <code>hide_good_box:&nbsp;</code><code>true</code><code>,</code> <code>})</code> <code>}</code> <code>},&nbsp;15);</code> <code>},</code> </td> 
 </tr> 
 </tbody> 
</table>

[http_ledc.cn_article_9]: http://ledc.cn/article/9
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3Njc3NjE_size_16_color_FFFFFF_t_70]: /images/20220121/2a68e96430994e649ad858dbc4f6162e.png