Vue items slide left to display operation buttons

“This is the 10th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

Now swipe left to delete has become the habit of everyone in the mobile terminal, but I always think it is not very friendly, because it is too good at hiding ^_^. Sometimes you don’t find that you can swipe left to delete a list. Try it. Today, I’m here to share with you something that I don’t think is very friendly, but everyone uses. Left click “Delete Effects”

Without further ado, let’s start with what we care most about, which is the end result. And then I’ll post the whole code.

Touch events

Let’s start with touch events on mobile:

Properties in the Touch event:

ClientX: Touch the x coordinate of the target in the viewport.

ClientY: Touch the target’s y coordinate in the viewport.

Identifier: Unique ID that identifies a touch.

PageX: Touch the x coordinate of the target in the page.

PageY: Touch the y coordinate of the target on the page.

ScreenX: Touches the x coordinate of the target on the screen.

ScreenY: Touches the y coordinate of the target on the screen.

Target: the DOM node target to be touched.

In fact, the process of swiping left mainly uses the touchStart and touchEnd events to determine the sliding position of the property clientX to process the list’s Transform animation, that is, to move left to show the hidden action button.

Complete code:

<style lang="scss">
 .list-box {
    position: relative;
    display: flex;
    transition: all 0.2s;
    transform: translate3d(2rem, 0.0);
    &[data-type="0"] {
      transform: translate3d(0.0.0);
    }
    &[data-type="1"] {
      transform: translate3d(-2rem, 0.0);
    }
  }
  .caozuo {
    position: absolute;
    top: 0;
    right: -2rem;
    display: flex;
    color: #fff;
    height: 100%;
    p {
      width: 1rem;
      font-size: 0.28rem;
      height: calc(100% - 0.18rem);
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-child(1) {
        background-color: #5d9ef5;
      }
      &:nth-child(2) {
        background-color: #f75855;
      }
    }
  }
  .list {
    width: 6.4rem;
    padding: 0.24rem 0.24rem 0 0.24rem;
    min-height: 2.74rem;
    border-radius: 0.1rem;
    background: #fff;
    margin: 0 auto 0.18rem auto;
    font-size: 0.32rem;

    .tag-date {
      height: 0.4rem;
      display: flex;
      align-items: center;
      .date {
        padding-left: 0.22rem;
      }
    }
    .sb-content {
      padding: 0.2rem 0;
      font-weight: bold;
      span{
        padding-right:0.2rem;
      }
    }
    .sb-ren {
      font-size: 0.28rem;
    }
    .beizhu {
      margin-top: 0.12rem;
      border-top: 0.01rem solid #f2f2f2;
      padding: 0.3rem 0;
      font-size: 0.28rem;
      color: #9999;
    }
  }
  .sb-btn {
    width: 6.9rem;
    height: 0.7rem;
    position: fixed;
    bottom: 0.72rem;
    left: 0.3rem;
    background-color: #5d9ef5;
    box-shadow: 0px 0px 26px 0px rgba(93.158.245.0.52);
    border-radius: 0.1rem;
    font-size: 0.34rem;
    color: #fff;
    text-align: center;
    line-height: 0.7rem;
  }
</style>
<div class="list-box"
             v-for="(item,index) in list"
             :key="index"
             data-type="0">
          <div class="list"
               @touchstart.capture="touchStart"
               @touchend.capture="touchEnd">
            <div class="tag-date">
              <van-tag color="#ff7386">{{item. Score}}</van-tag>
              <span class="date">{{item.date}}</span>
            </div>
            <div class="sb-content">
              <span v-if="item.name">{{item.name}}</span>
              <span>{{item.buildName}}{{item.roomName }}</span>
            </div>
             
          </div>
          <div class="caozuo">
            <p @click="edit(item)">Modify the</p>
          </div>

 </div>
 <script>
 export default {
  data(){
    return {
      list: [].}},methods: {// Slide to start
    touchStart (e) {
      // Record the initial position
      this.startX = e.touches[0].clientX;
    },
    // The slide ends
    touchEnd (e) {
      console.log(e)
      // The parent element of the current slide
      let parentElement = e.currentTarget.parentElement;
      // Record the end position
      this.endX = e.changedTouches[0].clientX;
      / / left smooth
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 50) {
        this.restSlide();
        parentElement.dataset.type = 1;
      }
      / / right slide
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -50) {
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    // Reset the sliding state
    restSlide () {
      let listItems = document.querySelectorAll('.list-box');
      / / reset
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0; }}}},</script>
Copy the code

conclusion

The above is to introduce to you based on VUE, JS native mobile terminal left slide operation function, I hope to help you, the main idea is also a certain degree of search.