Effect:

Train of thought:

1, Use relative positioning and absolute positioning, place the list on the upper layer and the delete button on the lower layer (z-index should not be negative).

2, There are three touch events: bindtouchstart, bindtouchmove and bindtouchend.

1. bindtouchstart records the starting point of touch. The coordinates of the starting point are in e.touches[0], which is relative to the screen, i.e. with the top left of the screen as the origin.

2. bindtouchmove records the points when touching the move. Ditto.

3. bindtouchmove records the end of touch point. The coordinates of the end point are in e.changedTouches[0].

Through methods 1 and 2, the list layer can move left and right with the touch point by acquiring the touch start point and moving distance;

Through 3 methods, get the end point and judge the distance from the start point. If the distance is less than half of the delete button, restore the list layer

Code:

1,wxml

<view wx:for="{{address}}" style='position: relative;'>
  <!-- List level -->
  <view class='list' style='{{item.txtStyle}}' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{index}}'>
    <!-- Receiving information -->
    <view class='info' bindtap='select_addr' data-id="{{item.id}}">
      <view>
        {{item.name}} 
        <span class="phone">{{item.phone}}</span>
        <span wx:if="{{item.default == 1}}" class='def'>default</span>
      </view>
      <view>
        {{item.province}} {{item.address}}
      </view>
    </view>
    <!-- Edit Icon -->
    <view class='edit' bindtap='edit' data-id='{{item.id}}' >
      <image src='/image/edit.png'></image>
    </view>
  </view>
  <!-- Delete button -->
  <view class="delete" data-id="{{item.id}}" data-index='{{index}}' bindtap="delItem" >delete</view>
</view>

<view class='add' bindtap='add'>Add address</view>

2,wxss

page{
  background-color: #F0EFF5;
}
.list{
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: white;
  margin-top: 2rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  justify-content:space-between;
  min-height: 150rpx;
}
.delete{
  position: absolute;
  top:0rpx;
  background-color: #e64340;
  width: 180rpx;
  text-align: center;
  z-index: 1;
  right: 0;
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.info view:first-child{
  text-align: center;
  font-size: 35rpx;
  margin-bottom: 10rpx;
}
.info view:nth-child(2){
  font-size: 30rpx;
  margin-bottom: 10rpx;
}
.def{
  font-size: 30rpx;
  border:1rpx solid red;
  border-radius: 5rpx;
  padding:0 10rpx;
  color: red;
  margin-right: 10rpx;
}
.phone{
  color:gray;font-size:30rpx;margin: 0 20rpx;
}
.edit{
  padding:40rpx;
}
.edit image{
  width: 40rpx;
  height: 40rpx;
  margin-left:10rpx;
}
.add{
  width: 650rpx;
  border: 2rpx solid gray;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  border-radius: 10rpx;
  position: fixed;
  bottom: 50rpx;
  left: 50rpx;
  background-color: white;
}

3,JS

Page({
  data: {
    address:[
      {
        id: "1",
        address: "1 Unit 222",
        name: "La La La",
        default:"1",
        phone: "12222223333",
        province: "Chang'an District, Shijiazhuang City, Hebei Province",
        txtStyle: "",
      },
      {
        id: "2",
        address: "2 No. 222, building 2",
        name: "To be careful",
        default: "0",
        phone: "12345678900",
        province: "Hangzhou Municipal District, Zhejiang Province",
        txtStyle: "",
      },
      {
        id: "3",
        address: "1 Block 1",
        name: "Ha ha ha",
        default: "0",
        phone: "18208350499",
        province: "Xinhua District, Shijiazhuang City, Hebei Province",
        txtStyle: "",
      }
    ],
    delBtnWidth: 180
  },

  onLoad: function (options) {
    //Get delivery address omitted
  },

  edit: function (e) {
    //Edit ship to omit
  },

  add: function () {
    //Add receiving address omitted
  },

  delItem: function (e) {
    var id = e.currentTarget.dataset.id;
    var index = e.currentTarget.dataset.index;
    this.data.address.splice(index, 1);
    this.setData({
      address: this.data.address
    })
  },

  touchS: function (e) {
    if (e.touches.length == 1) {
      this.setData({
        //Set the horizontal position of the touch starting point
        startX: e.touches[0].clientX
      });
    }
  },

  touchM: function (e) {
    if (e.touches.length == 1) {
      //Horizontal position when fingers move
      var moveX = e.touches[0].clientX;
      //The difference between the position of the finger starting point and the moving period
      var disX = this.data.startX - moveX;
      var delBtnWidth = this.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) {//If the moving distance is less than or equal to 0, the position of the text layer does not change
        txtStyle = "left:0rpx";
      } else if (disX > 0) {//Move distance is greater than 0, text layer left value is equal to finger move distance
        txtStyle = "left:-" + disX + "rpx";
        if (disX >= delBtnWidth) {
          //The maximum control finger movement distance is the width of the delete button
          txtStyle = "left:-" + delBtnWidth + "rpx";
        }
      }
      //What is the item for getting finger touch
      var index = e.currentTarget.dataset.index;
      var list = this.data.address;
      list[index]['txtStyle'] = txtStyle;
      //Update status of list
      this.setData({
        address: list
      });
    }
  },
  touchE: function (e) {
    if (e.changedTouches.length == 1) {
      //Horizontal position after finger movement
      var endX = e.changedTouches[0].clientX;
      //The distance between the beginning and the end of touching and the movement of fingers
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //If the distance is less than 1 / 2 of the delete button, the delete button is not displayed
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
      //What is the item for getting finger touch
      var index = e.currentTarget.dataset.index;
      var list = this.data.address;
      var del_index = '';
      disX > delBtnWidth / 2 ? del_index = index : del_index = '';
      list[index].txtStyle = txtStyle;
      //Update status of list
      this.setData({
        address: list,
        del_index: del_index
      });
    }
  },
})