mpvue小程序仿qq左滑置頂刪除組件

來源：懂視網責編：小采時間：2020-11-27 22:10:37

mpvue小程序仿qq左滑置頂刪除組件

mpvue小程序仿qq左滑置頂刪除組件:背景：前幾天，公司的一個小程序項目開發的時候，遇到了一點點問題。設計師這狗幣要讓我在小程序上實現類似QQ左滑置頂刪除的操作，心里mmp，我就是一個剛來公司三天的小小前端實習生而已，我想學習....當然剛剛來就被公司委以重任，也能看出本人技術過人，尤

推薦度：

點擊下載本文 文檔為doc格式

導讀mpvue小程序仿qq左滑置頂刪除組件:背景：前幾天，公司的一個小程序項目開發的時候，遇到了一點點問題。設計師這狗幣要讓我在小程序上實現類似QQ左滑置頂刪除的操作，心里mmp，我就是一個剛來公司三天的小小前端實習生而已，我想學習....當然剛剛來就被公司委以重任，也能看出本人技術過人，尤

背景：

前幾天，公司的一個小程序項目開發的時候，遇到了一點點問題。設計師這狗幣要讓我在小程序上實現類似QQ左滑置頂刪除的操作，心里mmp，我就是一個剛來公司三天的小小前端實習生而已，我想學習....當然剛剛來就被公司委以重任，也能看出本人技術過人，尤其是作為一個大二剛剛結束的學生來說。廢話不多說，對于這個功能，第一反應就是百度，不百度不得了，一百度嚇一跳。前輩們也來都做過?！澳俏也皇侵苯诱瞻峋托?，開心”。開開心心的用mpvue上手之后，心里mmp，mpvue的坑這么多。。還不如自己動手擼一個，效率還更快。

我們先來看看效果圖，有圖有真相：

效果圖：

實現：

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左滑置頂刪除組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

mpvue小程序仿qq左滑置頂刪除組件

推薦度：

點擊下載本文 文檔為doc格式

標簽：小程序左滑刪除組件

熱門焦點

mpvue小程序仿qq左滑置頂刪除組件

mpvue小程序仿qq左滑置頂刪除組件

mpvue小程序仿qq左滑置頂刪除組件

最新推薦

猜你喜歡

熱門推薦