欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年08月03日 11:39:30   作者:JB_Chen666  
最近在做小程序開發(fā)的時候,遇到了點問題。最終選擇用mpvue來做,誰知這么多坑,下面小編把我遇到的問題分享給大家,如果大家對mpvue小程序仿qq左滑置頂刪除組件相關知識感興趣的朋友一起看看吧

背景:

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

我們先來看看效果圖,有圖有真相:

效果圖:

實現(xiàn):

1,上面說過mpvue的坑,比如里面的每一個的元素都是overflow:hidden,并且似乎都繼承了display:block。(看小程序開發(fā)工具是這樣的,具體源碼沒看,就只能猜猜)。所以主要解決是讓元素overflow:scroll,這個主要是看效果的時候會用到

2,左滑和右滑,這又是一個坑。本以為mpvue的滑動事件會和vue的一模一樣。開開心心的按著原來想法擼,發(fā)現(xiàn)怎么滑都滑不動,果斷打印一波數(shù)據(jù),發(fā)現(xiàn)滑動事件大有奧妙!

3,布局方面我采用的是rpx+flex。

4,點擊時候置頂與取消置頂是通過json數(shù)據(jù)的top實現(xiàn)的。刪除是用數(shù)組的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>
  <!-- 內(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:"旺財",
     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;
  },
  // 滑動結(jié)束
  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 () {
   // 調(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)用應用實例的方法獲取全局數(shù)據(jù)
  this.getUserInfo()
 }
}
</script>

總結(jié)

以上所述是小編給大家介紹的mpvue小程序仿qq左滑置頂刪除組件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • Vue如何跨組件傳遞Slot的實現(xiàn)

    Vue如何跨組件傳遞Slot的實現(xiàn)

    這篇文章主要介紹了Vue如何跨組件傳遞Slot的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • vue監(jiān)聽scroll的坑的解決方法

    vue監(jiān)聽scroll的坑的解決方法

    這篇文章主要介紹了vue監(jiān)聽scroll的坑的解決方法,現(xiàn)在分享給大家,也給大家做個參考,希望給有同樣經(jīng)歷的人幫助
    2017-09-09
  • Element?Table行的動態(tài)合并及數(shù)據(jù)編輯示例

    Element?Table行的動態(tài)合并及數(shù)據(jù)編輯示例

    這篇文章主要為大家介紹了Element?Table行的動態(tài)合并及數(shù)據(jù)編輯示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • vue3獲取子組件的DOM元素的方法總結(jié)

    vue3獲取子組件的DOM元素的方法總結(jié)

    在 Vue 3 中,訪問子組件的 DOM 元素是一個常見的需求,本文將介紹如何在 Vue 3 中使用不同的方法來獲取子組件的 DOM 元素,需要的朋友可以參考下
    2023-08-08
  • 淺析從面向?qū)ο笏季S理解Vue組件

    淺析從面向?qū)ο笏季S理解Vue組件

    用面向?qū)ο蟮乃季S去理解Vue組件,可以將所有的事物都抽象為對象,而類或者說是組件,都具有屬性和操作。這篇文章主要介紹了嘗試用面向?qū)ο笏季S理解Vue組件,需要的朋友可以參考下
    2021-07-07
  • vue 解決異步數(shù)據(jù)更新問題

    vue 解決異步數(shù)據(jù)更新問題

    今天小編就為大家分享一篇vue 解決異步數(shù)據(jù)更新問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue+Antv?F2實現(xiàn)層疊柱狀圖

    Vue+Antv?F2實現(xiàn)層疊柱狀圖

    這篇文章主要為大家詳細介紹了Vue+Antv?F2實現(xiàn)層疊柱狀圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue3?使用defineAsyncComponent與component標簽實現(xiàn)動態(tài)渲染組件思路詳解

    vue3?使用defineAsyncComponent與component標簽實現(xiàn)動態(tài)渲染組件思路詳解

    這篇文章主要介紹了vue3?使用defineAsyncComponent與component標簽實現(xiàn)動態(tài)渲染組件,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • vue子傳父關于.sync與$emit的實現(xiàn)

    vue子傳父關于.sync與$emit的實現(xiàn)

    這篇文章主要介紹了vue子傳父關于.sync與$emit的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • nuxt.js寫項目時增加錯誤提示頁面操作

    nuxt.js寫項目時增加錯誤提示頁面操作

    這篇文章主要介紹了nuxt.js寫項目時增加錯誤提示頁面操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11

最新評論