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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js实现新年倒计时效果
Dec 10 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
JS定义类的六种方式详解
May 12 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 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/06/07 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
python三元运算符实现方法
2013/12/17 Python
Python操作json数据的一个简单例子
2014/04/17 Python
在Python中使用HTML模版的教程
2015/04/29 Python
Python之re操作方法(详解)
2017/06/14 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python中format()格式输出全解
2019/04/12 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
如何验证python安装成功
2020/07/06 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
技能竞赛活动方案
2014/02/21 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android