mpvue仿qq左滑置頂刪除組件
背景：

前幾天仰冠，公司的一個(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é)生來說骗随。廢話不多說，對于這個(gè)功能赴叹，第一反應(yīng)就是百度鸿染，不百度不得了，一百度嚇一跳乞巧。前輩們也來都做過涨椒。“那我不是直接照搬就行绽媒，開心”蚕冬。開開心心的用mpvue上手之后，心里mmp是辕，mpvue的坑這么多囤热。。免糕。赢乓。還不如自己動(dòng)手?jǐn)]一個(gè)忧侧，效率還更快。

image

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

效果圖：

image

實(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>