Customize the left sliding button in the line in the applet, which is similar to the QQ and Wx message interface

Usually in use QQ perhaps WX Chat , Slide an item left in the message list , Several operation buttons will appear , What's the top , Mark unread and so on , Let's use the native applet to realize this function

wxml part

<!-- moveTarget  It mainly records the current sliding or closing state  -->
<view class="list-group {
   {moveTarget=='move-box-'+index?('item-move'+(btnList.length>3?3:btnList.length)):''}}"
mut-bind:touchmove="touchListMove" 
mut-bind:touchstart="touchListStrat" 
data-target="move-box-{
   {index}}" 
wx:for="{
   {reportDataList}}" wx:key="index">
  <view class="box">
    {
   {item}}
  </view>
    <!-- btnList, The button array after sliding left  -->
  <view class="btn-group" wx:if="{
   {btnList.length>0}}">
    <view wx:for="{
   {btnList}}" wx:key="index" class="btn" bindtap="tapBtn" 
    data-btnindex="{
   {index}}">
      {
   {item}}
    </view>
  </view>
</view>

 1.moveTarget

        Defined in the tag  data-target="move-box-{ {index}}" , For example, there are ten boxes in the page , You slide the first , Then the corresponding result is move-box-0, Then give... In the method moveTarget assignment  data-target , When the two are the same , The corresponding box can slide , If you don't make this limitation , It will cause a box to slide , All boxes move together

2. mut-bind:touchmove="touchListMove"  mut-bind:touchstart="touchListStrat"

        Corresponding sliding start and sliding end methods ：mut-bind , I don't quite understand the detailed meaning , Maybe one method works, and the other also works , Interested in Baidu for a while

3.{ {moveTarget=='move-box-'+index?('item-move'+(btnList.length>3?3:btnList.length)):''}}

        Here is the corresponding (1) What it says is , If equal , Find the corresponding box , Add the following class name , The style corresponding to the class name specifies the width of sliding to the left

wxss part

/*  Suppose the width of an operation button is  166rpx,item-move1 Represents the style of an operation button , And so on  */
.list-group.item-move3{
  transform: translateX(-500rpx);
}
 .list-group.item-move2{
  transform: translateX(-332rpx);
}
 .list-group.item-move1{
  transform: translateX(-166rpx);
}
.list-group {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  width: 100%;
  background-color: #f0f0f0;
  margin-bottom: 10rpx;
  transition: all .6s ease-in-out 0s;
}

/*  Position the operation button on the right side of the box , Remember to add   transform: translateX(100%); */
.btn-group {
  position: absolute;
  right: 0;
  top: 0;
  width: 500rpx;
  height: 100%;
  display: flex;
  flex-direction: row;
  transform: translateX(100%);
}
 .btn-group .btn{
  width: 166.5rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

js part

    All the data here is customized by me , Actually, it is possible to obtain data in the background

// pages/index/component/index.js
Component({
  /**
   *  Initial data of the page 
   */
  data: {
    reportDataList: [' The box 1',' The box 2'], //  Page box array 
    btnList: [' Button 1',' Button 2',' Button 3'], //  Operation button array 
    moveStartX: 0, //  Sliding distance 
    moveTarget: '', //  Slide control 
  },
  //  Component method Center 
  methods: {
    //  Slide start 
    touchListStrat(e) {
      this.setData({
        moveStartX: e.touches[0].pageX
      })
    },
    //  Slip end 
    touchListMove(e) {
      let moveEndX = e.touches[0].pageX;
      let moveStartX = this.data.moveStartX;
      let btnList = this.data.btnList;

      if (btnList.length>0) {
        let size = Math.abs(moveEndX - moveStartX);
        if (moveEndX < moveStartX) {
          if (size > 20) {
            this.setData({
              moveTarget: e.currentTarget.dataset.target
            })
          }
        } else {
          this.setData({
            moveTarget: ''
          })
        }
      }
    },
    //  Click the in line button 
    tapBtn(e) {
      let btnindex = e.currentTarget.dataset.btnindex;
      //  Button click events can be defined here 
      //  When you click the button, let moveTarget It's empty , In this way, you cannot find the box you are currently sliding , So after clicking, the slide will return to its original state 
      this.setData({
        moveTarget: ""
      })
    }
  }

})

  The effect has been roughly achieved