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


Posted in Javascript onAugust 03, 2018

背景:

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

我们先来看看效果图,有图有真相:

效果图:

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

<template>
 <div class="container">
  <!-- 头部 -->
  <div class="head">
   <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover"/>
   <span class="head-info">消息</span>
  </div>
  <!-- 搜索 -->
  <div class="search">
   <input type="search"/>
   <span>搜索</span>
  </div>
  <!-- 内容 -->
  <div class="infoAll" v-for="(item,index) in commitInfo" :key="index">
   <ul v-if="item.top">
    <li @touchstart="touchStart($event)" @touchend="touchEnd($event,index)" :data-type="item.type" style="background-color:#EDFBFE;">
     <div class="imgInfo" @click="recover(index)">
      <img :src="item.img">
     </div>
     <div class="centerInfo">
      <div class="name">
        <span>{{item.name}}</span>
      </div>
      <div class="sonName">
       <span>{{item.sonName}}</span>
       </div>
     </div>
     <div class="timeInfo" @click="recover(index)">
      <div class="time">
       <text>{{item.time}}</text>
      </div>
      <div class="infoNum" style="">
        <text style="font-size:12px;">{{item.infoNum}}</text> 
      </div>
     </div>
     <div class="top" @click="top(index)" style="width:30%">
      取消置顶
     </div>
    </li> 
   </ul>
  </div>
  <div class="infoAll" v-for="(item,index) in commitInfo" :key="index">
   <!-- {{item.img}} -->
   <ul v-if="!item.top">
    <li @touchstart="touchStart($event)" @touchend="touchEnd($event,index)" :data-type="item.type">
     <div class="imgInfo" @click="recover(index)">
      <img :src="item.img">
     </div>
     <div class="centerInfo">
      <div class="name">
        <span>{{item.name}}</span>
      </div>
      <div class="sonName">
       <span>{{item.sonName}}</span>
       </div>
     </div>
     <div class="timeInfo" @click="recover(index)">
      <div class="time">
       <text>{{item.time}}</text>
      </div>
      <div class="infoNum" style="">
        <text style="font-size:12px;">{{item.infoNum}}</text> 
      </div>
     </div>
     <div class="top" @click="top(index)">
      置顶
     </div>
     <div class="delect" @click="delect(index)">
      删除
     </div>
    </li> 
   </ul>
  </div>
 </div>
</template>

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

<script>
import card from '@/components/card'
export default {
 data () {
  return {
   userInfo: {},
   commitInfo:[
    {
     img:"http://img3.imgtn.bdimg.com/it/u=3067730600,935028889&fm=27&gp=0.jpg",
     name:"旺财",
     sonName:"今晚去吃饭吗?",
     time:"19:08",
     infoNum:"9",
     top:false,
     type:0
    },
    {
     img:"http://img1.imgtn.bdimg.com/it/u=1257196754,3171363795&fm=27&gp=0.jpg",
     name:"前端学习群",
     sonName:"hanber:异步与同步的问题",
     time:"02:08",
     infoNum:"99+",
     top:false,
     type:0
    },
    {
     img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672209094,624238697&fm=27&gp=0.jpg",
     name:"小学同学",
     sonName:"好久不见,最近好吗?",
     time:"02:08",
     infoNum:"9",
     top:false,
     type:0
    },
     {
     img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1312347818,1612941824&fm=200&gp=0.jpg",
     name:"老妈",
     sonName:"啥时候回家一趟呀?",
     time:"23:08",
     infoNum:"1",
     top:false,
     type:0
    },
    {
     img:"http://img2.imgtn.bdimg.com/it/u=1093392508,3329264726&fm=27&gp=0.jpg",
     name:"AD动漫群",
     sonName:"ghost:《你的名字》求资源",
     time:"02:08",
     infoNum:"99+",
     top:false,
     type:0
    }
   ]
  }
 },
 components: {
  card
 },
 methods: {
 // 滑动开始
  touchStart(e){
   // 获取移动距离,可以通过打印出e,然后分析e的值得出
    this.startX = e.mp.changedTouches[0].clientX;
  },
  // 滑动结束
  touchEnd(e,index){
    // 获取移动距离
    this.endX = e.mp.changedTouches[0].clientX; 
    if(this.startX-this.endX > 10){
      for(let i=0;i<this.commitInfo.length;i++){
         this.commitInfo[i].type = 0
      }
      this.commitInfo[index].type = 1
    }
    else if(this.startX-this.endX < -10){
      for(let i=0;i<this.commitInfo.length;i++){
         this.commitInfo[i].type = 0
      }
    }
  },
  // 点击回复原状
  recover(index){
     this.commitInfo[index].type = 0
  },
  getUserInfo () {
   // 调用登录接口
   wx.login({
    success: () => {
     wx.getUserInfo({
      success: (res) => {
       this.userInfo = res.userInfo
      }
     })
    }
   })
  },
  // 置顶
  top(index){
   this.commitInfo[index].top = !this.commitInfo[index].top;
   this. recover(index);
  },
  // 删除
  delect(index){
   this.commitInfo.splice(index,1);
  }
 },
 created () {
  // 调用应用实例的方法获取全局数据
  this.getUserInfo()
 }
}
</script>

总结

以上所述是小编给大家介绍的mpvue小程序仿qq左滑置顶删除组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
vue.js实例todoList项目
Jul 07 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
React中的Context应用场景分析
Jun 11 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 #Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 #Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 #Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 #Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 #Javascript
小程序tab页无法传递参数的方法
Aug 03 #Javascript
详解Webpack多环境代码打包的方法
Aug 03 #Javascript
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
Python NumPy库安装使用笔记
2015/05/18 Python
django实现前后台交互实例
2017/08/07 Python
python的debug实用工具 pdb详解
2019/07/12 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
会计学生自我鉴定
2014/02/06 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
Python实现打乒乓小游戏
2021/09/25 Python