mpvue小程序怎么实现仿qq左滑置顶删除组件

这篇文章主要介绍了mpvue小程序怎么实现仿qq左滑置顶删除组件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇mpvue小程序怎么实现仿qq左滑置顶删除组件文章都会有所收获，下面我们一起来看看吧。

效果图：

实现：

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主要代码:

关于"mpvue小程序怎么实现仿qq左滑置顶删除组件"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"mpvue小程序怎么实现仿qq左滑置顶删除组件"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。