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代码:
消息搜索
{{item.name}}{{item.sonName}}{{item.time}} {{item.infoNum}} 取消置顶
{{item.name}}{{item.sonName}}{{item.time}} {{item.infoNum}} 置顶删除
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左滑置顶删除组件-创新互联
路径分享:http://ybzwz.com/article/ddpjpj.html