微信小程序?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-06
electron實(shí)現(xiàn)qq快捷登錄的方法示例
這篇文章主要介紹了electron實(shí)現(xiàn)qq快捷登錄的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
JS中比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-01
JavaScript中關(guān)于字符串替換與截取的知識(shí)點(diǎn)匯總
在日常開(kāi)發(fā)中,經(jīng)常遇到針對(duì)字符串的替換、截取,知識(shí)點(diǎn)比較碎容易混淆,所以本文為大家整理了一下相關(guān)的知識(shí)點(diǎn),希望對(duì)大家有所幫助2023-05-05

