这篇文章主要讲解了“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具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
感谢各位的阅读，以上就是“vue怎么实现仿qq左滑置顶删除组件”的内容了，经过本文的学习后，相信大家对vue怎么实现仿qq左滑置顶删除组件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
