最近做微信小程序項(xiàng)目遇到左滑動(dòng)效果，比如在我的收藏頁(yè)面，我的歷史瀏覽記錄頁(yè)面，我的購(gòu)物車(chē)頁(yè)面，大多數(shù)都會(huì)用到這種效果，我把代碼復(fù)制出來(lái)，供大家參考，用的時(shí)候直接用模板，再此基礎(chǔ)上修改就行。
創(chuàng)新互聯(lián)公司2013年開(kāi)創(chuàng)至今，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元萊州做網(wǎng)站,已為上家服務(wù),為萊州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
wxml中的代碼：
{{item.goods_name}} ￥{{item.goods_price}} ￥{{item.mktprice}} 刪除
我這是對(duì)完接口之后的代碼，循環(huán)items，然后用{{item.}}取到下面的值，并且用了一個(gè)判斷，如果后臺(tái)返回來(lái)的字段值marketable==‘true'，讓其顯示商品的銷(xiāo)售價(jià)和原價(jià)，否則顯示該商品已下架。
js中的代碼：
重慶分公司
重慶分公司
data: {
startX: 0, //開(kāi)始坐標(biāo)
startY: 0
},
touchstart: function(e) {
//開(kāi)始觸摸時(shí) 重置所有刪除
this.data.items.forEach(function(v, i) {
if (v.isTouchMove) //只操作為true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
items: this.data.items
})
},
//滑動(dòng)事件處理
touchmove: function(e) {
var that = this,
index = e.currentTarget.dataset.index, //當(dāng)前索引
startX = that.data.startX, //開(kāi)始X坐標(biāo)
startY = that.data.startY, //開(kāi)始Y坐標(biāo)
touchMoveX = e.changedTouches[0].clientX, //滑動(dòng)變化坐標(biāo)
touchMoveY = e.changedTouches[0].clientY, //滑動(dòng)變化坐標(biāo)
//獲取滑動(dòng)角度
angle = that.angle({
X: startX,
Y: startY
}, {
X: touchMoveX,
Y: touchMoveY
});
that.data.items.forEach(function(v, i) {
v.isTouchMove = false
//滑動(dòng)超過(guò)30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新數(shù)據(jù)
that.setData({
items: that.data.items
})
},
/**
* 計(jì)算滑動(dòng)角度
* @param {Object} start 起點(diǎn)坐標(biāo)
* @param {Object} end 終點(diǎn)坐標(biāo)
*/
angle: function(start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回?cái)?shù)字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},wxml中的代碼：
.touch-item {
background-color: #fff;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.content {
width: 100%;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(180rpx);
transform: translateX(180rpx);
margin-left: -180rpx;
}
.touch-move-active .content, .touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.com {
padding: 25rpx;
height: 210rpx;
}
.tp {
background-color: white;
float: left;
}
.img {
width: 210rpx;
height: 210rpx;
display: inline-block;
vertical-align: middle;
border-radius: 15rpx;
}
.txt {
width: 420rpx;
margin-left: 270rpx;
position: relative;
}
.txt .tit {
font-size: 28rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.txt .bot {
width: 100%;
font-size: 24rpx;
margin-top: 20rpx;
}
.ti1 {
margin-top: 15rpx;
font-size: 23rpx;
background-color: #fce64c;
padding: 10rpx;
display: inline-block;
}
.ti {
margin-top: 35rpx;
font-size: 28rpx;
display: inline-block;
color: #a2a2a2;
}
.del {
background-color: red;
width: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(180rpx);
transform: translateX(180rpx);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.new-price {
font-weight: 600;
color: #ff503c;
font-size: 35rpx;
}
.old-price {
margin-left: 30rpx;
text-decoration: line-through;
font-size: 28rpx;
color: #b1b1b1;
}
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
