微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果
更新時(shí)間：2021年08月13日 15:58:56 作者：半度℃溫?zé)?
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果的具體代碼，供大家參考，具體內(nèi)容如下
效果
圖片
WXML
<view class="container">
<!-- 收貨地址 -->
<view class="address">
<view class="left">
<view class="icon">
<image src="../../images/address.png"></image>
</view>
<view class="txt-wrap">
<view class="txt">北京市朝陽(yáng)區(qū)SOLANA藍(lán)色港灣</view>
</view>
</view>
<view class="right">
<view class="line"></view>
<view class="txt">編輯</view>
</view>
</view>
<view class="list">
<view class="item" wx:for="{{list}}" wx:key="index">
<!-- 商品頭部信息 -->
<view class="head">
<view class="head-icon" bindtap="selectItem" data-index="{{index}}">
<image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
</view>
<view class="from">
<view class="left">
<view class="storeImg">
<image src="../../images/store.png"></image>
</view>
<view class="storeName">{{item.storeName}}</view>
<view class="arrow">
<image src="../../images/arrow.png"></image>
</view>
</view>
<view class="right">
<view class="freight">已免運(yùn)費(fèi)</view>
<view class="coupon">優(yōu)惠券</view>
</view>
</view>
</view>
<!-- 商品內(nèi)容信息 -->
<view class="cont">
<view class="wrap"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
data-index="{{index}}"
style="left: -{{item.x}}rpx" />
<view class="cont-icon">
<view class="img-wrap" bindtap="selectItem" data-index="{{index}}">
<image src="{{item.flag ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
</view>
<view class="img">
<image src="{{item.imgUrl}}"></image>
</view>
</view>
<view class="info">
<view class="name">{{item.name}}</view>
<view class="specs-wrap">
<view class="specs">{{item.specs}}</view>
</view>
<view class="discount-wrap">
<view class="discount">{{item.discount}}</view>
</view>
<view class="price-wrap">
<view class="price">
<text>￥</text>{{item.price}}<text>.00</text>
</view>
<view class="num">
<view class="reduce" bindtap="reduce" data-index="{{index}}">-</view>
<input class="inp"
type="number"
value="{{item.num}}"
maxlength="4"
bindinput="bindNumInput"
bindblur="bindNumBlur"
data-index="{{index}}"/>
<view class="add" bindtap="add" data-index="{{index}}">+</view>
</view>
</view>
</view>
<!-- 商品右滑刪除按鈕 -->
<view class="del" bindtap="delete" data-index="{{index}}">刪除</view>
</view>
</view>
</view>
</view>
<!-- 全選、總計(jì)、結(jié)算 -->
<view class="total">
<view class="total-icon" bindtap="allSelect">
<view class="img">
<image src="{{selectAll ? '../../images/select.png' : '../../images/no-select.png'}}"></image>
</view>
<text style="font-size: 26rpx;">全選</text>
</view>
<view class="settle">
<view class="price">
總計(jì)
<text style="margin: 0 4rpx;">:</text>
<text style="font-size: 30rpx;font-weight: 800;">¥{{totalPrice}}</text>
</view>
<view class="btn" wx:if="{{totalNum > 0}}">
去結(jié)算<text style="margin-left: 4rpx;">({{totalNum}})</text>
</view>
<view class="btn" wx:else>
去結(jié)算<text style="margin-left: 4rpx;">(0)</text>
</view>
</view>
</view>
</view>
JS
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
list: [
{
id: 1,
name: 'Apple/蘋果 15.4英寸2.2GHz MacBook Pro 256G四核i7處理器256G手提電腦筆記本電腦商務(wù)辦公學(xué)生學(xué)習(xí)家用電腦',
imgUrl: '../../images/0.png',
storeName: '哇塞官方旗艦店',
specs: '現(xiàn)貨 5788灰 十代i7/16G/1T/6G獨(dú)立顯卡',
discount: '滿3000享?yè)Q購(gòu)',
num: 1,
price: '11999'
},
{
id: 2,
name: 'Apple/蘋果 13 英寸 MacBook Pro 1.4GHz 4 核處理器 (Turbo Boost 最高可達(dá) 3.9GHz) 256GB 存儲(chǔ)容量 觸控欄和觸控 ID',
imgUrl: '../../images/1.png',
storeName: '哇塞官方旗艦店',
specs: '現(xiàn)貨 5749白 十代i7/16G/1T',
discount: '滿3000享?yè)Q購(gòu)',
num: 1,
price: '11245',
},
{
id: 3,
name: 'Apple/蘋果 13 英寸 MacBook Air 1.1GHz 雙核 Core i3 處理器，Turbo Boost 最高可達(dá) 3.2GHz 256GB 存儲(chǔ)容量 觸控 ID',
imgUrl: '../../images/2.png',
storeName: '哇塞官方旗艦店',
specs: '現(xiàn)貨 九代i7/16G/1T/4G獨(dú)立顯卡',
discount: '滿3000享?yè)Q購(gòu)',
num: 1,
price: '9245'
},
{
id: 4,
name: 'Apple/蘋果 13 英寸 MacBook Pro 1.4GHz 4 核處理器 (Turbo Boost 最高可達(dá) 3.9GHz) 512GB 存儲(chǔ)容量 觸控欄和觸控 ID',
imgUrl: '../../images/3.png',
storeName: '哇塞官方旗艦店',
specs: '現(xiàn)貨 i7/500G/集成顯卡',
discount: '滿3000享?yè)Q購(gòu)',
num: 1,
price: '11499'
},
{
id: 5,
name: '【原封正品】20款 Apple/蘋果 13.3英寸MacBook Pro 512G筆記本電腦帶觸控欄ID 輕薄便攜商務(wù)辦公筆記本電腦',
imgUrl: '../../images/4.png',
storeName: '哇塞官方旗艦店',
specs: '現(xiàn)貨 5746白 i5/8G/500G/集成顯卡',
discount: '滿3000享?yè)Q購(gòu)',
num: 1,
price: '14499'
}
],
selectAll: false, // 是否全選
totalNum: 0, // 已選中的商品總數(shù)量
totalPrice: 0, // 已選中的商品總價(jià)格
startX: 0, // 手指觸摸的初始X軸坐標(biāo)
startY: 0 // 手指觸摸的初始Y軸坐標(biāo)
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
this.data.list.forEach((item)=> {
item.flag = false // 是否已選中商品的依據(jù)字段
item.x = 0 // 每個(gè)列表項(xiàng)的相對(duì)定位的初始位置
})
},
// 單個(gè)商品選中，計(jì)算已選中的商品總價(jià)格
selectItem(e) {
let index = e.currentTarget.dataset.index
let flag = this.data.list[index].flag
if(flag == false) {
this.data.list[index].flag = true
} else {
this.data.list[index].flag = false
}
// 判斷是否全部選中了
let bool = this.data.list.every((item) => {
return item.flag
})
this.setData({
selectAll: bool,
list: this.data.list
})
this.countPrice()
},
// 減少數(shù)量，計(jì)算已選中的商品總價(jià)格
reduce(e) {
let index = e.currentTarget.dataset.index
let num = this.data.list[index].num
// 判斷當(dāng)前商品的數(shù)量是否大于1，大于1則可以進(jìn)行減少操作
if(num > 1) {
this.data.list[index].num = num - 1
}
this.setData({
list: this.data.list
})
this.countPrice()
},
// 輸入數(shù)量
bindNumInput(e) {
let val = e.detail.value
let index = e.currentTarget.dataset.index
if(Number(val) == 0) {
this.data.list[index].num = 1
} else {
this.data.list[index].num = Number(val)
}
},
// 失去焦點(diǎn)，計(jì)算已選中的商品總價(jià)格
bindNumBlur() {
this.setData({
list: this.data.list
})
this.countPrice()
},
// 增加商品數(shù)量，計(jì)算已選中的商品總價(jià)格
add(e) {
let index = e.currentTarget.dataset.index
let num = this.data.list[index].num
this.data.list[index].num = num + 1
this.setData({
list: this.data.list
})
this.countPrice()
},
// 手指觸摸的起始坐標(biāo)
touchStart(e) {
this.data.startX = e.touches[0].clientX;
this.data.startY = e.touches[0].clientY;
},
// 滑動(dòng)列表項(xiàng)
touchMove(e) {
let index = e.currentTarget.dataset.index
// 獲得當(dāng)前坐標(biāo)
let currentX = e.touches[0].clientX;
let currentY = e.touches[0].clientY;
let x = this.data.startX - currentX; //橫向移動(dòng)距離
let y = Math.abs(this.data.startY - currentY); //縱向移動(dòng)距離，若向左移動(dòng)有點(diǎn)傾斜也可以接受
if (x > 35 && y < 110) {
// 向左滑是顯示刪除
this.data.list[index].x = 110;
this.setData({
list: this.data.list
})
} else if (x < -35 && y < 110) {
// 向右滑
this.data.list[index].x = 0;
this.setData({
list: this.data.list
})
}
},
// 刪除列表項(xiàng)，重新計(jì)算總價(jià)格和全選狀態(tài)
delete(e) {
let index = e.currentTarget.dataset.index
this.data.list.splice(index, 1)
this.setData({
list: this.data.list
})
this.countPrice()
},
// 全選
allSelect() {
// 判斷是否已經(jīng)全選，是就全部取消選中，否則全部選中，之后計(jì)算總價(jià)格
if(this.data.selectAll) {
this.data.list.forEach((item)=>{
item.flag = false
})
this.data.selectAll = false
} else {
this.data.list.forEach((item)=>{
item.flag = true
})
this.data.selectAll = true
}
this.setData({
selectAll: this.data.selectAll,
list: this.data.list
})
this.countPrice()
},
// 計(jì)算已選中的總價(jià)格
countPrice() {
// 判斷是否有已選中的商品，有則進(jìn)行計(jì)算，沒有則清除全選狀態(tài)，總價(jià)格，結(jié)算的商品數(shù)量
let bool = this.data.list.some((item) => {
return item.flag
})
if(bool) {
// 每次重新計(jì)算時(shí)，先把上一次記錄的數(shù)據(jù)清空
this.data.totalNum = 0
this.data.totalPrice = 0
this.data.list.forEach((item)=>{
if(item.flag == true) {
this.data.totalPrice += (item.price * item.num)
this.data.totalNum += item.num
}
})
} else {
this.data.totalNum = 0
this.data.totalPrice = 0
this.data.selectAll = false
}
this.setData({
totalNum: this.data.totalNum,
totalPrice: this.data.totalPrice,
selectAll: this.data.selectAll
})
}
})
WXSS
page {
background: #f2f2f2;
}
.container {
width: 100%;
padding-bottom: 90rpx;
box-sizing: border-box;
overflow-y: scroll;
}
.address {
width: 100%;
height: 80rpx;
background: #fff;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
padding: 0 30rpx;
box-sizing: border-box;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.address .left {
flex: 1;
display: flex;
align-items: center;
}
.address .left .icon {
width: 32rpx;
height: 35rpx;
margin-right: 8rpx;
}
.address .left .icon image {
width: 100%;
height: 100%;
}
.address .left .txt-wrap {
width: 0;
flex: 1;
}
.address .left .txt-wrap .txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10rpx;
box-sizing: border-box;
}
.address .right {
width: 80rpx;
display: flex;
align-items: center;
}
.address .right .line {
width: 0rpx;
height: 26rpx;
border-left: 4rpx solid #bfbfbf;
}
.address .right .txt {
flex: 1;
text-align: right;
}
.list {
width: 100%;
}
.list .item {
width: 100%;
border-radius: 20rpx;
padding: 30rpx 0;
box-sizing: border-box;
background: #ffffff;
margin-bottom: 20rpx;
}
/* 商品頭部信息 */
.list .item .head {
width: 100%;
font-size: 26rpx;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
/* 商品選中圖標(biāo) */
.list .item .head .head-icon {
width: 40rpx;
height: 40rpx;
margin-right: 26rpx;
border-radius: 100%;
box-shadow: 0 0 10rpx lightgray;
}
.list .item .head .head-icon image {
width: 100%;
height: 100%;
}
.list .item .head .from {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.list .item .head .from .left {
display: flex;
align-items: center;
}
.list .item .head .from .left .storeImg {
width: 26rpx;
height: 26rpx;
margin-top: -4rpx;
margin-right: 8rpx;
}
.list .item .head .from .left .storeImg image {
width: 100%;
height: 100%;
}
/* 店鋪名稱 */
.list .item .head .from .left .storeName {
flex: 1;
margin-right: 14rpx;
}
/* 右箭頭 */
.list .item .head .from .left .arrow {
width: 8rpx;
height: 34rpx;
display: flex;
align-items: center;
}
.list .item .head .from .left .arrow image {
width: 100%;
height: 16rpx;
.list .item .head .from .right {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* 免運(yùn)費(fèi) */
.list .item .head .from .right .freight {
font-size: 22rpx;
color: #1e1e1e;
}
/* 優(yōu)惠券 */
.list .item .head .from .right .coupon {
font-size: 24rpx;
padding: 4rpx 14rpx;
background: #ffeded;
border-radius: 20rpx;
margin-left: 16rpx;
color: #ffaa7f;
}
/* 商品信息 */
.list .item .cont {
width: 100%;
overflow: hidden;
font-size: 26rpx;
}
.list .item .cont .wrap {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
transition: all 0.2s;
position: relative;
top: 0;
left: 0;
}
/* 商品油滑的刪除按鈕 */
.list .item .cont .wrap .del {
width: 110rpx;
height: 100%;
background: #ffaa7f;
font-size: 24rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: -110rpx;
}
.list .item .cont .wrap .cont-icon {
display: flex;
margin-right: 26rpx;
}
/* 商品選中或未選中圖標(biāo) */
.list .item .cont .wrap .cont-icon .img-wrap {
width: 40rpx;
height: 40rpx;
margin-right: 26rpx;
border-radius: 100%;
box-shadow: 0 0 10rpx lightgray;
position: relative;
top: 72rpx;
left: 0;
}
.list .item .cont .wrap .cont-icon .img-wrap image {
width: 100%;
height: 100%;
}
/* 商品圖片 */
.list .item .cont .wrap .cont-icon .img {
width: 190rpx;
height: 190rpx;
border-radius: 10rpx;
box-shadow: 0 0 10rpx lightgray;
overflow: hidden;
}
.list .item .cont .wrap .cont-icon .img image {
width: 100%;
height: 100%;
}
.list .item .cont .wrap .info {
flex: 1;
width: 0;
}
/* 商品名稱 */
.list .item .cont .wrap .info .name {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10rpx;
}
/* 商品規(guī)格 */
.list .item .cont .wrap .info .specs-wrap {
width: 100%;
font-size: 24rpx;
padding-right: 12rpx;
border-radius: 18rpx;
box-sizing: border-box;
margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list .item .cont .wrap .info .specs-wrap .specs {
display: inline-block;
background: #f2f2f2;
border-radius: 18rpx;
padding: 4rpx 16rpx 4rpx 16rpx;
box-sizing: border-box;
}
/* 商品優(yōu)惠 */
.list .item .wrap .wrap .cont .info .discount-wrap {
width: 100%;
font-size: 24rpx;
}
.list .item .cont .wrap .info .discount-wrap .discount {
display: inline-block;
background: #f2f2f2;
border-radius: 18rpx;
padding: 4rpx 20rpx 4rpx 16rpx;
box-sizing: border-box;
}
/* 商品價(jià)格 */
.list .item .cont .wrap .info .price-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8rpx;
}
.list .item .cont .wrap .info .price-wrap .price {
font-size: 36rpx;
font-weight: 700;
color: #ffaa7f;
}
.list .item .cont .wrap .info .price-wrap .price text {
font-size: 24rpx;
}
/* 商品數(shù)量 */
.list .item .cont .wrap .info .price-wrap .num {
display: flex;
align-items: center;
justify-content: flex-end;
}
.list .item .cont .wrap .info .price-wrap .num .reduce {
width: 40rpx;
font-weight: 800;
color: #262626;
text-align: center;
line-height: 40rpx;
}
.list .item .cont .wrap .info .price-wrap .num .inp {
width: 80rpx;
height: 40rpx;
min-height: 40rpx;
text-align: center;
background: #f2f2f2;
margin: 0 2rpx;
}
.list .item .cont .wrap .info .price-wrap .num .add {
width: 40rpx;
font-weight: 800;
color: #262626;
text-align: center;
line-height: 40rpx;
}
/* 全選、總計(jì)、結(jié)算 */
.total {
width: 100%;
height: 90rpx;
background: #fff;
padding: 0 20rpx 0 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
}
.total .total-icon {
display: flex;
align-items: center;
justify-content: flex-start;
}
.total .total-icon .img {
width: 40rpx;
height: 40rpx;
margin-right: 14rpx;
border-radius: 100%;
box-shadow: 0 0 10rpx lightgray;
}
.total .total-icon image {
width: 100%;
height: 100%;
}
.total .settle {
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
.total .settle .price {
display: flex;
align-items: center;
margin-right: 16rpx;
}
.total .settle .btn {
height: 60rpx;
background: #ffaa7f;
border-radius: 30rpx;
padding: 0 30rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在父頁(yè)面中訪問iframe中的各個(gè)元素與一般的訪問頁(yè)面元素?zé)o本質(zhì)區(qū)別，無(wú)非是需要在父頁(yè)面中事先獲取需要處理的iframe對(duì)象，在獲取iframe對(duì)象后，其操作基本沒什么特別之處。2009-07-07
js實(shí)現(xiàn)瀑布流的一種簡(jiǎn)單方法實(shí)例分享
現(xiàn)在說瀑布流式布局似乎有點(diǎn)晚了，但是每一項(xiàng)技術(shù)都是向著“精”和“簡(jiǎn)”的方向在不斷發(fā)展，在發(fā)展到極致之前，需要一個(gè)相當(dāng)漫長(zhǎng)的過程，因此，從這個(gè)角度來說，當(dāng)瀑布流被應(yīng)用得越來越多的時(shí)候，反而更應(yīng)該討論它，討論如何將它改善2013-11-11
在全局執(zhí)行環(huán)境中使用this，標(biāo)識(shí)Global對(duì)象，在瀏覽器中就是window對(duì)象。2010-03-03
前端uniapp封裝網(wǎng)絡(luò)請(qǐng)求以及實(shí)際應(yīng)用教程
這篇文章主要給大家介紹了關(guān)于前端uniapp封裝網(wǎng)絡(luò)請(qǐng)求以及實(shí)際應(yīng)用的相關(guān)資料,在uniapp中進(jìn)行網(wǎng)絡(luò)測(cè)試請(qǐng)求可以通過封裝網(wǎng)絡(luò)請(qǐng)求來實(shí)現(xiàn),文中給出了詳細(xì)的代碼實(shí)例,需要的朋友可以參考下2024-01-01
微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序數(shù)據(jù)統(tǒng)計(jì)和錯(cuò)誤統(tǒng)計(jì)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
js addDqmForPP給標(biāo)簽內(nèi)屬性值加上雙引號(hào)的函數(shù)
這篇文章主要介紹了js addDqmForPP給標(biāo)簽內(nèi)屬性值加上雙引號(hào)的函數(shù),需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳按鈕并顯示縮略圖小輪子，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-08-08
淺談Javascript鼠標(biāo)和滾輪事件,鼠標(biāo)事件也許是web頁(yè)面當(dāng)中最常用到的事件，因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備2012-06-06
基于JavaScript實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)購(gòu)物車功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02