mpvue小程序仿qq左滑置顶删除

mpvue仿qq左滑置顶删除组件
背景：

前几天，公司的一个小程序项目开发的时候，遇到了一点点问题。设计师这狗币要让我在小程序上实现类似QQ左滑置顶删除的操作，心里mmp，我就是一个刚来公司三天的小小前端实习生而已，我想学习....当然刚刚来就被公司委以重任，也能看出本人技术过人，尤其是作为一个大二刚刚结束的学生来说。废话不多说，对于这个功能，第一反应就是百度，不百度不得了，一百度吓一跳。前辈们也来都做过。“那我不是直接照搬就行，开心”。开开心心的用mpvue上手之后，心里mmp，mpvue的坑这么多。。。。还不如自己动手撸一个，效率还更快。

image

我们先来看看效果图，有图有真相：

效果图：

image

实现：

1，上面说过mpvue的坑，比如里面的每一个的元素都是overflow:hidden，并且似乎都继承了display：block。（看小程序开发工具是这样的，具体源码没看，就只能猜猜）。所以主要解决是让元素overflow:scroll,这个主要是看效果的时候会用到

2，左滑和右滑，这又是一个坑。本以为mpvue的滑动事件会和vue的一模一样。开开心心的按着原来想法撸，发现怎么滑都滑不动，果断打印一波数据，发现滑动事件大有奥妙！

3，布局方面我采用的是rpx+flex。

4，点击时候置顶与取消置顶是通过json数据的top实现的。删除是用数组的splice（）方法。

5，滑动效果是css动画控制的。

下面直接贴代码：如果看不懂可以嫌麻烦可以去我的github：https://github.com/JB-Chen/mpvue-slide

程序员大佬们，觉得可以就给个star，以资鼓励一下！

HTML代码：

主要的html代码：

css代码：

// 头部
*{
    margin:0px;
    padding: 0px;
}
.head {
    width: 100%;
    height:130rpx;
    background-color: #38A7FA;
    margin-top:-195rpx;
    display: flex;
    align-items: center;
    .head-info{
        color: #fff;
        font-size:30rpx;
        margin-left: 30%;
        margin-top:20rpx;
        letter-spacing: 4rpx;
      }
      .userinfo-avatar {
        width: 80rpx;
        height: 80rpx;
        margin: 20rpx;
        border-radius: 50%;
        margin-top:30rpx;
      
      }
  }
  .search{
      width: 90%;
      margin-top:20rpx;
      margin-bottom: 20rpx;
      input{
          width: 100%;
          height: 20rpx;
          background-color: #F3F3F3;
          border-radius: 5rpx;
          z-index: 0;
      }
      span{
          position: absolute;
          color: #B5B5B5;
          font-size: 24rpx;
          margin-top:-44rpx;
          z-index: 999;
          margin-left: 42%;
          text-align: center;
    
      }
  }
  .infoAll{
     width: 100%;
      ul{
        width: 100%;
        // overflow-x: scroll;
          li{
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
              width: 1100rpx;
              height: 150rpx; 
            //   background-color: red;
              line-height: 150rpx;
              border-bottom: 1px solid #E0EEF1;
            //   垂直居中，  // 子div水平排列
              display:flex;
            //   justify-content:center;
              align-items:center;
            
              .imgInfo{
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                background-color: #38A7FA;
                margin-left: 2%;
                img{
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    overflow: hidden;
                }
                
              }
              .centerInfo{
                width: 40%;
                height: 150rpx;
                margin-left: 2%;
                .name{
                    margin-top:-20rpx;
                    span{
                        font-size: 35rpx;
                    }
                   
                }
                .sonName{
                    margin-top:-110rpx;
                    span{
                        font-size: 24rpx;
                        color: #7C8489;
                    }
                
                }
                 
              }
              .timeInfo{
                width: 15%;
                height: 150rpx;
                margin-left: 6%;
               
                .time{
                    margin-top:-20rpx;
                    color: #92A0A1;
                    font-size: 25rpx;
                    position: absolute;
                    
                }
                .infoNum{
                    width:50rpx;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    height: 30rpx;
                    border-radius: 10rpx;
                    background-color: #93D5ED;
                    margin-left: 10rpx;
                    margin-top: 70rpx;

                }
                 
              }
              .top{
                  width: 15%;
                  height: 150rpx;
                  background-color: #C4C7CD;
                  color: #fff;
                  font-size: 34rpx;
                  text-align:center
              }
              .delect{
                width: 15%;
                height: 150rpx;
                background-color: #FF3B32;
                color: #fff;
                font-size: 34rpx;
                text-align:center
              }
          }
      }
  }
li[data-type="0"]{
    transform: translate3d(0,0,0);
}
li[data-type="1"]{
    transform: translate3d(-400rpx,0,0);
}

js主要代码: