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 相关文章推荐
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
yii上传文件或图片实例
2014/04/01 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php两种无限分类方法实例
2015/04/21 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
javascript整除实现代码
2010/11/23 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JS中递归函数
2016/06/17 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue动态生成表格的行和列
2019/07/18 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
VSCode下好用的Python插件及配置
2018/04/06 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
开业庆典答谢词
2014/01/18 职场文书
广告语设计及教案
2014/03/21 职场文书
保险公司晨会主持词
2014/03/22 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
家长评语怎么写
2014/12/30 职场文书
新郎结婚保证书
2015/02/26 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python