WeChat applet realizes the effect of swiping left to delete list items

This article shares the specific code for WeChat Mini Program to achieve the effect of swiping left to delete list items for your reference. The specific content is as follows

Effect

picture

WXML

<view class="container">
  <!-- Delivery Address-->
  <view class="address">
    <view class="left">
      <view class="icon">
        <image src="../../images/address.png"></image>
      </view>
      <view class="txt-wrap">
        <view class="txt">SOLANA Blue Harbor, Chaoyang District, Beijing</view>
      </view>
    </view>
    <view class="right">
      <view class="line"></view>
      <view class="txt">Edit</view>
    </view>
  </view>
  <view class="list">
    <view class="item" wx:for="{{list}}" wx:key="index">
      <!-- Product header information-->
      <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">Free shipping</view>
            <view class="coupon">Coupon</view>
          </view>
        </view>
      </view>
      <!-- Product content information-->
      <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>
          <!-- Swipe right to delete the product -->
          <view class="del" bindtap="delete" data-index="{{index}}">Delete</view>
        </view>
      </view>
    </view>
  </view>
  <!-- Select all, total, settlement -->
  <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;">Select All</text>
    </view>
    <view class="settle">
      <view class="price">
        Total <text style="margin: 0 4rpx;">:</text>
        <text style="font-size: 30rpx;font-weight: 800;">¥{{totalPrice}}</text>
      </view>
      <view class="btn" wx:if="{{totalNum > 0}}">
        Go to checkout<text style="margin-left: 4rpx;">({{totalNum}})</text>
      </view>
      <view class="btn" wx:else>
        Go to checkout<text style="margin-left: 4rpx;">(0)</text>
      </view>
    </view>
  </view>
</view>

Page({
  /**
   * Initial data of the page */
  data: {
    list: [
      {
        id: 1, 
        name: 'Apple/Apple 15.4-inch 2.2GHz MacBook Pro 256G Quad-core i7 Processor 256G Laptop Notebook Business Office Student Study Home Computer',
        imgUrl: '../../images/0.png',
        storeName: 'Wow official flagship store',
        specs: 'Spot 5788 gray 10th generation i7/16G/1T/6G independent graphics card',
        discount: 'Exchange for purchases over 3000',
        num: 1,
        price: '11999'
      },
      { 
        id: 2, 
        name: 'Apple 13-inch MacBook Pro 1.4GHz Quad-core processor (Turbo Boost up to 3.9GHz) 256GB storage Touch Bar and Touch ID',
        imgUrl: '../../images/1.png', 
        storeName: 'Wow official flagship store',
        specs: 'Spot 5749 White 10th Generation i7/16G/1T',
        discount: 'Exchange for purchases over 3000',
        num: 1,
        price: '11245', 
      },
      { 
        id: 3, 
        name: 'Apple 13-inch MacBook Air 1.1GHz dual-core Core i3 processor, Turbo Boost up to 3.2GHz 256GB storage Touch ID', 
        imgUrl: '../../images/2.png',
        storeName: 'Wow official flagship store',
        specs: 'In stock 9th generation i7/16G/1T/4G independent graphics card',
        discount: 'Exchange for purchases over 3000',
        num: 1,
        price: '9245'
      },
      { 
        id: 4, 
        name: 'Apple 13-inch MacBook Pro 1.4GHz Quad-core processor (Turbo Boost up to 3.9GHz) 512GB storage Touch Bar and Touch ID', 
        imgUrl: '../../images/3.png',
        storeName: 'Wow official flagship store',
        specs: 'i7/500G/integrated graphics card',
        discount: 'Exchange for purchases over 3000',
        num: 1,
        price: '11499'
      },
      { 
        id: 5, 
        name: '[Original sealed product] 20 models of Apple 13.3-inch MacBook Pro 512G laptop with Touch Bar ID Lightweight and portable business office laptop', 
        imgUrl: '../../images/4.png',
        storeName: 'Wow official flagship store',
        specs: 'Spot 5746 white i5/8G/500G/integrated graphics',
        discount: 'Exchange for purchases over 3000',
        num: 1,
        price: '14499'
      }
    ],
    selectAll: false, // Whether to select all totalNum: 0, // The total number of selected items totalPrice: 0, // The total price of selected items startX: 0, // The initial X-axis coordinate of the finger touch startY: 0 // The initial Y-axis coordinate of the finger touch },

  /**
   * Life cycle function--listen for page loading*/
  onLoad: function (options) {
    
  },
  /**
   * Life cycle function--monitor page display*/
  onShow: function () {
    this.data.list.forEach((item)=> {
      item.flag = false // Whether the item is selected based on the field item.x = 0 // The initial position of the relative positioning of each list item})
  },
  // Select a single item and calculate the total price of the selected item 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
    }
    // Determine whether all items are selected let bool = this.data.list.every((item) => {
      return item.flag
    })
    this.setData({
      selectAll: bool,
      list: this.data.list
    })
    this.countPrice()
  },
  // Reduce the quantity and calculate the total price of the selected items reduce(e) {
    let index = e.currentTarget.dataset.index
    let num = this.data.list[index].num
    // Determine whether the current number of products is greater than 1. If it is greater than 1, you can reduce it if (num > 1) {
      this.data.list[index].num = num - 1
    }
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // Input quantity 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)
    }
  },
  // Lose focus, calculate the total price of the selected items bindNumBlur() {
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // Increase the number of items and calculate the total price of the selected items 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()
  },
  // The starting coordinates of the finger touchStart(e) {
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },
  // Slide list item touchMove(e) {
    let index = e.currentTarget.dataset.index
    // Get the current coordinates let currentX = e.touches[0].clientX;
    let currentY = e.touches[0].clientY;
    let x = this.data.startX - currentX; //horizontal movement distance let y = Math.abs(this.data.startY - currentY); //vertical movement distance, if it moves a little to the left, it is also acceptable if (x > 35 && y < 110) {
    // Swipe left to delete this.data.list[index].x = 110; 
      this.setData({
        list: this.data.list
      })
    } else if (x < -35 && y < 110) {
      //Slide to the right this.data.list[index].x = 0; 
      this.setData({
        list: this.data.list
      })
    }
  },
  // Delete the list item, recalculate the total price and all selected status delete(e) {
    let index = e.currentTarget.dataset.index
    this.data.list.splice(index, 1)
    this.setData({
      list: this.data.list
    })
    this.countPrice()
  },
  // Select all allSelect() {
    // Check if all are selected, if yes, unselect all, otherwise select all and calculate the total price 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()
  },
  // Calculate the total price of the selected countPrice() {
    // Determine whether there are any selected items. If yes, calculate them. If no, clear all selected items, total price, and number of items settled. let bool = this.data.list.some((item) => {
      return item.flag
    })
    if(bool) {
      // Each time you recalculate, clear the last recorded data 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: 0px;
  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;
}

/* Product header information*/
.list .item .head {
  width: 100%;
  font-size: 26rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
/* Product selected icon*/
.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%;
}
/* Store Name */
.list .item .head .from .left .storeName {
  flex: 1;
  margin-right: 14rpx;
}
/* Right arrow */
.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;
}
/* Free Shipping*/
.list .item .head .from .right .freight {
  font-size: 22rpx;
  color: #1e1e1e;
}
/* Coupon */
.list .item .head .from .right .coupon {
  font-size: 24rpx;
  padding: 4rpx 14rpx;
  background: #ffeded;
  border-radius: 20rpx;
  margin-left: 16rpx;
  color: #ffaa7f;
}

/* Product information */
.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;
}
/* Product slick delete button */
.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;
}
/* Product selected or unselected icon*/
.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%;
}
/* Product image*/
.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;
}
/* Product name*/
.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;
}
/* Product specifications */
.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;
}
/* Product discount*/
.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;
}
/* Product price*/
.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;
}
/* Quantity of products */
.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;
}

/*Select all, total, settlement*/
.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;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat applet realizes the left swipe to delete effect
WeChat applet left swipe to delete code example
WeChat applet implements swiping left to delete the delivery address
WeChat applet realizes the left swipe to delete effect
Detailed explanation of the development case of the left-swipe-to-delete function in WeChat mini-programs
Swipe left to delete item in WeChat mini program list
WeChat applet implements left swipe to modify and delete functions
WeChat Mini Program swipe to delete (swipe left to delete)
Implementation of the swipe left delete function in WeChat applet
Implementation code of the left swipe delete effect in WeChat applet

<<: How to install Linux flash

>>: Solution to the problem of null column in NOT IN filling pit in MySQL