vue怎么实现仿qq左滑置顶删除组件

这篇文章主要讲解了“Vue怎么实现仿qq左滑置顶删除组件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现仿qq左滑置顶删除组件”吧！

效果图：

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" >     <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" >        <text >{{item.infoNum}}</text>       </div>     </div>     <div class="top" @click="top(index)" >      取消置顶     </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" >        <text >{{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>

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

感谢各位的阅读，以上就是“vue怎么实现仿qq左滑置顶删除组件”的内容了，经过本文的学习后，相信大家对vue怎么实现仿qq左滑置顶删除组件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！