背景：

前几天公司在开发小程序项目的时候遇到了一点小问题。设计师的狗币想让我在小程序中实现一个类似QQ左滑顶删除的操作。在我心里，mmp，我只是一个刚来公司三天的小前端实习生，想学习.当然刚来的时候被公司赋予了很重的责任，也能看出我的技术过硬，尤其是作为一个刚读完大二的学生。不用说，对于这个功能，第一反应是百度，但百度是一个极大的震撼。前辈来了，做了。“那我就不直接抄了，开心就好”。开心的用了mpvue之后，心里有那么多mmp和mpvue的坑。最好自己做一个，效率更高。

先来看看效果图。有图有真相：

渲染：

实现：

1.上面提到了mpvue的坑。例如，其中的每个元素都被overflow:hidden，看起来它继承了display:block。(看小程序开发工具。如果不看具体的源代码，只能猜测。).所以主要的解决方法是让元素飞越： croll，主要是看效果的时候用

2.左右滑动，这是另一个坑。我以为mpvue的滑动事件会和vue完全一样。愉快地按下原想法，发现它不会滑动，果断地打印了一波数据，发现滑动事件很神秘！

3.我在布局中使用rpx flex。

4.点击时，通过json数据的顶部实现打顶和取消打顶。删除是通过数组的splice()方法完成的。

5.滑动效果由css动画控制。

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

程序员，如果你觉得可以，给一颗星鼓励你！

HTML代码：

主html代码：

模板div class='容器'！-header-div class=' head ' img class=' user info-avatar ' v-if=' user info . avatar URL ' : src=' http : user info . avatar URL ' background-size=' cover '/span class=' head-info ' message/span-search-div class=' search '输入类型=' search'/spansearch /span /div！-content-div class=' info all ' v-for='(item，index)in commitInfo ' : key=' index ' ul v-if=' item . top ' Li @ touch start=' touch start($ event)' @ touch end=' touch end($ event，index)' : data-type=' item . type ' style=' background-color : # edbfe；'div class=' imgInfo ' @ click=' recover(index)' img : src=' http : item . img '/div class=' centeninfo ' div class=' name ' span { { item . name } }/span/div class=' sonName ' span { { item . sonName } }/span/div/div class=' timeInfo ' @ click=' recover(index)' div class=' time ' text { { item . time } }/text/div class=' info '{{item。infonum } }/text/div/div class=' top ' @ click=' top(index)' style=' width :30% '取消top/div/Li/ul/div div class=' infoall ' v-for='(item，index) in - {{item.img}} - ul v-if='！item . top ' Li @ touch start=' touch start($ event)' @ touch end=' touch end($ event，index)' : data-type=' item . type ' div class=' imgInfo ' @ click=' recover(index)' img : src=' http : item . img '/div class=' centinfo ' div class=' name ' span { { item . name } }/span/span{{item。infonum } }/text/div/div class=' top ' @ click=' top(index)' top/div class=' delete ' @ click=' delete(index)' delete/div/Li/ul/div/div/template CSS代码：

//头部* { margin :0 pxpadding : 0px }。头部{宽度： 100%;高度：130rpx背景-颜色： # 38A7FA页边距-顶部：-195 rpx；display : flex align-items :居中；head-info { color : # fff；font-size :30 rpx保证金-左侧： 30%;保证金-最高：20 rpx字母-间距： 4rpx} .用户信息-头像{宽度： 80 rpx高度： 80rpxmargin: 20rpx边界半径： 50%;页边距-顶部：30 rpx} } .搜索{宽度： 90%；保证金-最高：20 rpx保证金-底部： 20 rpx输入{宽度： 100%；高度： 20rpx背景-颜色： # f3f 3；边界半径： 5rpxz-index : 0；} span { position : absolute ecolor : # B5b 5 font-size : 24 rpx；页边距-顶部：-44 rpx；z指数： 999；保证金-左侧： 42%;文本对齐：中心；} } .infoAll { width : 100%；ul {宽度： 100%；//溢出-x:滚动；李{-WebKit-transit :全部0.2转换：全0.2s宽度： 1100 rpx高度： 150 rpx//背景-颜色：红色；线高： 150 rpx边框-bottom: 1px实心# E0EEF1//垂直居中， //子差异水平排列display:flex//自圆其说-内容中心：对齐-项目：居中；imgInfo { width: 100rpx高度： 100 rpx边界半径： 50%;背景-颜色： # 38A7FA保证金-左侧： 2%;img { width: 100rpx高度： 100 rpx边界半径： 50%;飞越：隐藏；} } .CenterInfo {宽度： 40%；高度： 150 rpx保证金-左侧： 2%;名称{ margin-top :-20 rpx；span { font-size : 35 rpx} } .sonName { margin-top :-110 rpx；span { font-size : 24 rpxcolor: # 7C8489} } }。时间信息{宽度： 15%；高度： 150 rpx保证金-左侧： 6%;时间{ margin-top :-20 rpx；color : # 92a 0a 1 font-size : 25 rpx；绝对位置：} .infoNum { width :50 rpxdisplay : flex align-items : }居中；正义-内容：中心；高度： 30 rpx border-半径： 10 rpx背景色-: # 93D5ED；左边距左： 10rpx边距-top : 70 rpx；} } .顶部{宽度： 15%;高度： 150 rpx背景-颜色： # C4C7CDcolor : # ffffont-size : 34 rpx；文本对齐：居中}。删除{宽度：15%；高度： 150 rpx背景-color : # ff3b 32；color : # ffffont-size : 34 rpx；文本对齐：居中} } } }李[数据类型=' 0 ']{ transform : translate 3d(0，0，0)；}李[数据类型=' 1 ']{ transform : translate 3d(-400 rpx，0，0)；}js主要代码：

脚本从“@/components/card”导入card导出默认{ data(){ return { userinfo : }，commit info :[{ img : ' http://img 3。img TN。bdimg。com/it/u=3067730600，935028889fm=27gp=0.jpg '，名称： '旺财，sonName: '今晚去吃饭吗？time:'19:08 '，infoNum:'9 '，top:false，type:0 }，{ img : ' http://img 1。img TN。bdimg。com/it/u=1257196754，3171363795fm=27gp=0.jpg '，名称： '前端学习群，sonName:'hanber:异步与同步的问题，time:'02:08 '，infoNum:'99 '，top:false，type:0 }，{ img : ' https://ss3。BD静态。com/70 cfv 8 sh _ q1ynxgkpowk1hf 6h hy/it/u=1672209094，624238697fm=27gp=0.jpg '，名称：小学同学，sonName: '好久不见，最近好吗？time:'02:08 '，infoNum:'9 '，top:false，type:0 }，{ img : ' https://ss0。BD静态。com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=1312347818，1612941824fm=200gp=0.jpg '，名称：老妈，sonName: '啥时候回家一趟呀？time:'23:08 '，infoNum:'1 '，top:false，type:0 }，{ img : ' http://img 2。img TN。bdimg。com/it/u=10933392508，3329264726fm=27gp=0.jpg '，名称：'AD动漫群，sonName:'ghost: 《你的名字》求资源，time:'02:08 '，infoNum: ' 99 '，top:false，type:0 } ] })，components: { card }，methods: { //滑动开始touchStart(e){ //获取移动距离，可以通过打印出e，然后分析e的值得出这个。startx=e . MP。changed touch[0 ].clientX}，//滑动结束touchEnd(e，index){ //获取移动距离这个。ENDx=e . MP。changed Touchs[0].clientXif(这个。startx-这个。endx 10){用于(让I=0；我是。commitinfo。长度；i ){ this.commitInfo[i].type=0 } this.commitInfo[index].type=1 } else if(this。startx-这个。endx-10){用于(让I=0；我是。commitinfo。长度；i ){ this.commitInfo[i].type=0 } } }，//点击回复原状恢复(索引){ this。commitinfo[index].type=0 }，getUserInfo () { //调用登录接口wx。登录({ success :()={ wx。getuser info({ success :(RES)={ this。userinfo=RES . userinfo } })})}，//置顶top(index){ this。commitinfo[index].top=！this.commitInfo[index].顶部；这个。恢复（索引);}, //删除delect(index){ this。commitinfo。拼接(索引，1)；} },已创建(){ //调用应用实例的方法获取全局数据this.getUserInfo() }}/script总结

以上所述是小编给大家介绍的没朋友小程序仿即时通信软件左滑置顶删除组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！