微信小程序?qū)崿F(xiàn)加入購(gòu)物車(chē)滑動(dòng)軌跡
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)加入購(gòu)物車(chē)滑動(dòng)軌跡的具體代碼,供大家參考,具體內(nèi)容如下
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() { //調(diào)用API從本地緩存中獲取數(shù)據(jù) // 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 { //調(diào)用登錄接口 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 起始點(diǎn)x坐標(biāo) * @param sy 起始點(diǎn)y坐標(biāo) * @param cx 控制點(diǎn)x坐標(biāo) * @param cy 控制點(diǎn)y坐標(biāo) * @param ex 結(jié)束點(diǎn)x坐標(biāo) * @param ey 結(jié)束點(diǎn)y坐標(biāo) * @param part 將起始點(diǎn)到控制點(diǎn)的線段分成的份數(shù),數(shù)值越高,計(jì)算出的曲線越精確 * @return 貝塞爾曲線坐標(biāo) */ 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 = []; // 起始點(diǎn)到控制點(diǎn)的x和y每次的增量 var changeX1 = (cx - sx) / part; var changeY1 = (cy - sy) / part; // 控制點(diǎn)到結(jié)束點(diǎn)的x和y每次的增量 var changeX2 = (ex - cx) / part; var changeY2 = (ey - cy) / part; //循環(huán)計(jì)算 for (var i = 0; i <= part; i++) { // 計(jì)算兩個(gè)動(dòng)點(diǎn)的坐標(biāo) var qx1 = sx + changeX1 * i; var qy1 = sy + changeY1 * i; var qx2 = cx + changeX2 * i; var qy2 = cy + changeY2 * i; // 計(jì)算得到此時(shí)的一個(gè)貝塞爾曲線上的點(diǎn) var lastX = qx1 + (qx2 - qx1) * i / part; var lastY = qy1 + (qy2 - qy1) * i / part; // 保存點(diǎn)坐標(biāo) 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 //獲取應(yīng)用實(shí)例 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修改軌跡結(jié)束時(shí)x軸的位置,2是在正中心 this.busPos['y'] = app.globalData.hh - 10; console.log('購(gòu)物車(chē)坐標(biāo)', this.busPos) }, onShow(){ app.editTabBar(); //顯示自定義的底部導(dǎo)航 }, tosearchpage(e){ wx.navigateTo({ url: '', }) }, touchOnGoods: function (e) { // 如果good_box正在運(yùn)動(dòng) 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); }, })
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 購(gòu)物車(chē)簡(jiǎn)單實(shí)例
- 微信小程序?qū)崙?zhàn)篇之購(gòu)物車(chē)的實(shí)現(xiàn)代碼示例
- 微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)功能
- 微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車(chē)中刪除選中的商品功能
- 微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)代碼實(shí)例詳解
- 微信小程序之購(gòu)物車(chē)功能
- 微信小程序購(gòu)物車(chē)、父子組件傳值及calc的注意事項(xiàng)總結(jié)
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車(chē)功能
- 微信小程序利用swiper+css實(shí)現(xiàn)購(gòu)物車(chē)商品刪除功能
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車(chē)小功能
相關(guān)文章
一款JavaScript壓縮工具:X2JSCompactor
一款JavaScript壓縮工具:X2JSCompactor...2007-06-06electron實(shí)現(xiàn)qq快捷登錄的方法示例
這篇文章主要介紹了electron實(shí)現(xiàn)qq快捷登錄的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10JS中比Switch...Case更優(yōu)雅的多條件判斷寫(xiě)法
這篇文章主要給大家介紹了關(guān)于JS中比Switch...Case更優(yōu)雅的多條件判斷寫(xiě)法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09防止網(wǎng)站內(nèi)容被拷貝的一些方法與優(yōu)缺點(diǎn)好處與壞處分析
防止網(wǎng)站內(nèi)容被拷貝的一些方法與優(yōu)缺點(diǎn)好處與壞處分析...2007-11-11解決js ajax同步請(qǐng)求造成瀏覽器假死的問(wèn)題
下面小編就為大家分享一篇解決js ajax同步請(qǐng)求造成瀏覽器假死的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01JavaScript中關(guān)于字符串替換與截取的知識(shí)點(diǎn)匯總
在日常開(kāi)發(fā)中,經(jīng)常遇到針對(duì)字符串的替換、截取,知識(shí)點(diǎn)比較碎容易混淆,所以本文為大家整理了一下相關(guān)的知識(shí)點(diǎn),希望對(duì)大家有所幫助2023-05-05