往左邊滑動出現刪除按鈕， 只對當前滑動的對象操作
wxml 代碼
<view class="shop-list">
? ? <view class="check-all-box" bindtap="onCheckAll">
? ? ? <view>
? ? ? ? <label class="check-around8"? bindtap="selected" data-lor='1'>
? ? ? ? ? <radio checked="{{allSelected?true:false}}" color="#000"></radio>
? ? ? ? ? <text class="check-all">{{checkAllText}}全選</text>
? ? ? ? </label>?
? ? ? </view>
? ? </view>
? ? <view class="item-box? {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{list}}" wx:key="{{index}}">
? ? ? <view class="item">
? ? ? ? <view class="check-around-box" data-id="{{item.id}}" >
? ? ? ? ? ? <label bindtap="selected" data-id="{{item.id}}" data-isSelect="{{item.isSelect}}">
? ? ? ? ? ? ? <radio checked="{{item.isSelect>0?true:false}}" color="#000"></radio>
? ? ? ? ? ? </label>? ?
? ? ? ? ? </view>
? ? ? ? <view class="item-img-box">
? ? ? ? ? <image class="item-img" src="{{item.thumbUrl}}" />
? ? ? ? </view>
? ? ? ? <view class="item-info-box">
? ? ? ? ? <text class="item-title">{{item.title}}</text>
? ? ? ? ? <text class="item-spec">{{item.spec}}</text>
? ? ? ? ? <text class="item-price">￥{{item.price}}</text>
? ? ? ? ? <view class="num-box">
? ? ? ? ? ? <view class="num-desc" data-id="{{item.id}}" data-total="{{item.total}}" bindtap="reduce">-</view>
? ? ? ? ? ? <input class="item-input" type="number"disabled="boolean" value="{{item.total}}" />
? ? ? ? ? ? <view class="num-plus" data-id="{{item.id}}" data-total="{{item.total}}" bindtap="plus">+</view>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? </view>
? ? ? <view class="remove" data-id="{{item.id}}" bindtap="remove">{{remove}}刪除</view>
? ? </view>
? </view>
wxss代碼
page{
? background-color: #f8f8f8;
}
.shop-list {
? display: flex;
? flex-direction: column;
? margin-top: 30rpx;
? padding-bottom:120rpx;
}
.check-all-box {
? display: flex;
? align-items: center;
? padding: 30rpx;
? background-color: #fff;
}
.check-all-box? .check-all {
? margin-left: 20rpx;
? font-size: 30rpx;
}
.check-around {
? width: 35rpx;
? height: 35rpx;
? margin-right:20rpx;
? border-radius: 50rpx;
? border: 1rpx solid #f8f8f8;
}
.check-active {
? width: 35rpx;
? height: 35rpx;
? border-radius: 50rpx;
? background-color: #999999;
}
.item-box {
? margin-bottom: 20rpx;
? position: relative;
? z-index: 99;
? font-size: 14px;
? display: flex;
? justify-content: space-between;
? border-bottom:1px solid #ccc;
? width: 100%;
? overflow: hidden
}
.item {
? display: flex;
? align-items: center;
? padding: 30rpx;
? background-color: #fff;
? position: relative;
? z-index: 99;
? width: 100%;
? margin-right:0;
? -webkit-transition: all 0.4s;
? transition: all 0.4s;
? -webkit-transform: translateX(90px);
? transform: translateX(90px);
? margin-left: -90px
}
.item .item-img {
? width: 180rpx;
? height: 180rpx;
? border-radius: 5rpx;
? border: 1rpx solid #eaeaea;
}
.item .item-info-box {
? display: flex;
? flex-direction: column;
? justify-content: space-between;
? width: 420rpx;
? height: 180rpx;
? margin-left:20rpx;
}
.item-info-box .item-title {
? font-size: 30rpx;
? white-space: nowrap;
? text-overflow: ellipsis;
? overflow: hidden;
? word-break: break-all;
}
.item-info-box .item-spec {
? color: #676767;
? margin-top: 15rpx;
? text-overflow: -o-ellipsis-lastline;
? overflow: hidden;
? text-overflow: ellipsis;
? display: -webkit-box;
? -webkit-line-clamp: 2;
? line-clamp: 2;
? -webkit-box-orient: vertical;
}
.item-info-box .item-price {
? display: flex;
? margin-top: 15rpx;
}
.item-info-box .num-box {
? display: flex;
? align-items: center;
? justify-content: flex-end;
? font-size: 30rpx;
}
.num-box .num-desc {
? padding: 0 10rpx;
? color: #999;
? border: 4rpx solid #999;
}
.num-box .item-input {
? width: 80rpx;
}
.item-input {
? text-align: center;
}
.num-box .num-plus {
? padding: 0 10rpx;
? color: #fff;
? background-color: #000;
? border: 4rpx solid #000;
}
.remove {
? background-color: orangered;
? width: 90px;
? display: flex;
? flex-direction: column;
? align-items: center;
? justify-content: center;
? color: #fff;
? -webkit-transform: translateX(90px);
? transform: translateX(90px);
? -webkit-transition: all 0.4s;
? transition: all 0.4s;
}
.touch-move-active .item,
.touch-move-active .remove {
? -webkit-transform: translateX(0);
? transform: translateX(0);
}
js代碼
var app = getApp()
Page({
? data: {
? ? list: [
? ? ? {
? ? ? ? id: '1',
? ? ? ? thumbUrl: 'https://cdnimg.pfhoo.com/Pro/s/20180404/8a22565d-9bb3-4b87-bf58-00e9db0e2d28.jpg',
? ? ? ? title: '大英博物館珠寶首飾系列“OK”首飾',
? ? ? ? spec: 'K黃',
? ? ? ? price: '199.10',
? ? ? ? num: 1,
? ? ? ? total: 10
? ? ? }, {
? ? ? ? id: '2',
? ? ? ? thumbUrl: 'https://cdnimg.pfhoo.com/Pro/s/20180404/8a22565d-9bb3-4b87-bf58-00e9db0e2d28.jpg',
? ? ? ? title: '大英博物館珠寶首飾系列“OK”首飾',
? ? ? ? spec: 'K黃',
? ? ? ? price: '899.20',
? ? ? ? num: 1,
? ? ? ? total: 1
? ? ? }
? ? ],
? ? startX: 0, //開始坐標
? ? startY: 0
? },
? onLoad: function () {
? },
? //手指觸摸動作開始 記錄起點X坐標
? touchstart: function (e) {
? ? //開始觸摸時 重置所有刪除
? ? this.data.list.forEach(function (v, i) {
? ? ? if (v.isTouchMove)//只操作為true的
? ? ? ? v.isTouchMove = false;
? ? })
? ? this.setData({
? ? ? startX: e.changedTouches[0].clientX,
? ? ? startY: e.changedTouches[0].clientY,
? ? ? list: this.data.list
? ? })
? },
? //滑動事件處理
? touchmove: function (e) {
? ? var that = this,
? ? ? index = e.currentTarget.dataset.index,//當前索引
? ? ? startX = that.data.startX,//開始X坐標
? ? ? startY = that.data.startY,//開始Y坐標
? ? ? touchMoveX = e.changedTouches[0].clientX,//滑動變化坐標
? ? ? touchMoveY = e.changedTouches[0].clientY,//滑動變化坐標
? ? ? //獲取滑動角度
? ? ? angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
? ? that.data.list.forEach(function (v, i) {
? ? ? v.isTouchMove = false
? ? ? //滑動超過30度角 return
? ? ? if (Math.abs(angle) > 30) return;
? ? ? if (i == index) {
? ? ? ? if (touchMoveX > startX) //右滑
? ? ? ? ? v.isTouchMove = false
? ? ? ? else //左滑
? ? ? ? ? v.isTouchMove = true
? ? ? }
? ? })
? ? //更新數據
? ? that.setData({
? ? ? list: that.data.list
? ? })
? },
? /**
? * 計算滑動角度
? * @param {Object} start 起點坐標
? * @param {Object} end 終點坐標
? */
? angle: function (start, end) {
? ? var _X = end.X - start.X,
? ? ? _Y = end.Y - start.Y
? ? //返回角度 /Math.atan()返回數字的反正切值
? ? return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
? },
? //刪除事件
? remove: function (e) {
? ? let that =this;
? ? let index = e.currentTarget.dataset.index;
? ? let list = that.data.list;
? ? wx.showModal({
? ? ? title: 'w溫馨提示！',
? ? ? content: '你確認刪除嗎？',
? ? ? success: function (res) {
? ? ? ? if (res.confirm) {
? ? ? ? ? console.log('444')
? ? ? ? ? list.splice(index, 1)
? ? ? ? ? that.setData({
? ? ? ? ? ? list:list
? ? ? ? ? })
? ? ? ? } else{
? ? ? ? ? console.log('用戶點擊取消')
? ? ? ? }
? ? ? }
? ? })
? }
})
