mpvue小程序仿qq左滑置頂刪除組件
更新時(shí)間：2018年08月03日 11:39:30 作者：JB_Chen666
最近在做小程序開發(fā)的時(shí)候，遇到了點(diǎn)問題。最終選擇用mpvue來做，誰(shuí)知這么多坑，下面小編把我遇到的問題分享給大家，如果大家對(duì)mpvue小程序仿qq左滑置頂刪除組件相關(guān)知識(shí)感興趣的朋友一起看看吧
背景：
前幾天，公司的一個(gè)小程序項(xiàng)目開發(fā)的時(shí)候，遇到了一點(diǎn)點(diǎn)問題。設(shè)計(jì)師這狗幣要讓我在小程序上實(shí)現(xiàn)類似QQ左滑置頂刪除的操作，心里mmp，我就是一個(gè)剛來公司三天的小小前端實(shí)習(xí)生而已，我想學(xué)習(xí)....當(dāng)然剛剛來就被公司委以重任，也能看出本人技術(shù)過人，尤其是作為一個(gè)大二剛剛結(jié)束的學(xué)生來說。廢話不多說，對(duì)于這個(gè)功能，第一反應(yīng)就是百度，不百度不得了，一百度嚇一跳。前輩們也來都做過。“那我不是直接照搬就行，開心”。開開心心的用mpvue上手之后，心里mmp，mpvue的坑這么多。。。。還不如自己動(dòng)手?jǐn)]一個(gè)，效率還更快。
我們先來看看效果圖，有圖有真相：
效果圖：
實(shí)現(xiàn)：
1，上面說過mpvue的坑，比如里面的每一個(gè)的元素都是overflow:hidden，并且似乎都繼承了display：block。（看小程序開發(fā)工具是這樣的，具體源碼沒看，就只能猜猜）。所以主要解決是讓元素overflow:scroll,這個(gè)主要是看效果的時(shí)候會(huì)用到
2，左滑和右滑，這又是一個(gè)坑。本以為mpvue的滑動(dòng)事件會(huì)和vue的一模一樣。開開心心的按著原來想法擼，發(fā)現(xiàn)怎么滑都滑不動(dòng)，果斷打印一波數(shù)據(jù)，發(fā)現(xiàn)滑動(dòng)事件大有奧妙！
3，布局方面我采用的是rpx+flex。
4，點(diǎn)擊時(shí)候置頂與取消置頂是通過json數(shù)據(jù)的top實(shí)現(xiàn)的。刪除是用數(shù)組的splice（）方法。
5，滑動(dòng)效果是css動(dòng)畫控制的。
下面直接貼代碼：如果看不懂可以嫌麻煩可以去我的github：https://github.com/JB-Chen/mpvue-slide
程序員大佬們，覺得可以就給個(gè)star，以資鼓勵(lì)一下！
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>
<!-- 內(nèi)容 -->
<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:"旺財(cái)",
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:"前端學(xué)習(xí)群",
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:"小學(xué)同學(xué)",
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:"啥時(shí)候回家一趟呀？",
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動(dòng)漫群",
sonName:"ghost:《你的名字》求資源",
time:"02:08",
infoNum:"99+",
top:false,
type:0
}
]
}
},
components: {
card
},
methods: {
// 滑動(dòng)開始
touchStart(e){
// 獲取移動(dòng)距離，可以通過打印出e，然后分析e的值得出
this.startX = e.mp.changedTouches[0].clientX;
},
// 滑動(dòng)結(jié)束
touchEnd(e,index){
// 獲取移動(dòng)距離
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
}
}
},
// 點(diǎn)擊回復(fù)原狀
recover(index){
this.commitInfo[index].type = 0
},
getUserInfo () {
// 調(diào)用登錄接口
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 () {
// 調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
this.getUserInfo()
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的mpvue小程序仿qq左滑置頂刪除組件，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue監(jiān)聽scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個(gè)參考，希望給有同樣經(jīng)歷的人幫助2017-09-09
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在 Vue 3 中,訪問子組件的 DOM 元素是一個(gè)常見的需求,本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素,需要的朋友可以參考下2023-08-08
用面向?qū)ο蟮乃季S去理解Vue組件，可以將所有的事物都抽象為對(duì)象，而類或者說是組件，都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下2021-07-07
今天小編就為大家分享一篇vue 解決異步數(shù)據(jù)更新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)層疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁(yè)面操作
這篇文章主要介紹了nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁(yè)面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11