1. 程式人生 > >mpvue小程式仿qq左滑置頂刪除

mpvue小程式仿qq左滑置頂刪除

mpvue仿qq左滑置頂刪除元件
背景:

前幾天,公司的一個小程式專案開發的時候,遇到了一點點問題。設計師這狗幣要讓我在小程式上實現類似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動畫控制的。

程式設計師大佬們,覺得可以就給個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刪除

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

微信程式開發之修改、刪除功能

wxml: <view class="offer-item" wx:for-items='{{offerList}}'> <!--這裡綁定了剛才說的3個函式分別為 touchS,touchM touchE--> &l

仿QQ刪除【基於RecyclerView】

這是我github開源專案,目前測試階段,歡迎大家使用提意見!   https://github.com/SineyCoder/LeftSlideView   使用步驟   新增倉庫 allprojects { rep

QQListview刪除,經典案例,高仿QQ,動畫效果,自定義!!

     雖然有很多開放寫得已經很完美的listview開源框架, 用起來也很方便, 只需修改下佈局,   大致套路都一樣, 幾乎沒什麼bug。 今天我們來看看自己定義的QQListview; 在這篇文章你能學到什麼?    1.事件衝突---listview 上下滑動

-齊梟飛前端架構師 微信程式--仿微信 QQ劃事件--

廢話不多說,直接上程式碼: js: var app = getApp() Page({ data: { items: [], startX: 0, //開始座標 startY: 0 }, onLoad: func

Android仿QQ(刪除等)功能

實現類似QQ滑動出現可操作項的功能,在網上看到有人自定義LinearLayout實現這個效果,但是靈活性有限。此demo使用開源專案SwipeLayout實現該功能。關於SwipeLayout的常用設定和屬性,這裡都做介紹,下面進入正題。 一、效果圖 二

前端 html h5 移動端 手機端 仿ios刪除效果

es2017 b- open translate def sna 技術 9.png replace 實現功能:左滑列表項(<li class="route-item" ></li>),出現刪除按鈕(<div class="removeJs"&

mpvue程式開發 - 生命週期梳理

轉自IMWeb社群,作者:llunnn,原文連結 最近在開發小程式,嘗試性地使用了一下mpvue框架。 mpvue 是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 實現,使其可以執行在小程式

iOS仿QQ選單、登入按鈕動畫、仿鬥魚直播APP、城市選擇器、自動佈局等原始碼

iOS精選原始碼 QQ側滑選單,右滑選單,QQ展開選單,QQ好友分組 image 登入按鈕 image 3分鐘快捷建立高效能輪播圖 ScrollView巢狀ScrolloView(UITableView 、UICollectionView)解決方案

mpvue程式中圖片根據自身寬高做自適應

需求:小程式因為自身上傳包大小的限制(每個包2M,使用分包總共可以上傳8M),所以小程式的靜態資源主要是放在伺服器端(主要是圖片資源)。但是從伺服器獲取圖片時有可能出現下面一種情況: 返回的是圖片的url地址,但並沒有圖片自身的寬高  ==>>  導致結果:無

mpvue 程式快速上手指南

需要了解一些原生小程式開發流程,主要是介面呼叫方式和目錄結構。 安裝 # 全域性安裝 vue-cli $ npm install --global vue-cli # 建立一個基於 mpvue-q

OC仿QQ

之前做側滑用的控制元件的DDMenu,總感覺好像差了點什麼,自己嘗試寫了一個,三層疊加,感覺效果不理想,偶然間看到了一篇部落格,與大家分享,再次申明,該程式碼不是我寫的,只是為了給自己留一個查詢資料的機會   下載地址:https://github.com/WiitterSimithYU/C

微信程式實現標籤頁塊效果

微信小程式實現標籤頁滑塊效果 小程式完整程式碼: wxml: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}

微信程式呼叫qq音樂API介面

2018年11月14日 15:23:10 LC_cat 閱讀數:8 標籤: 小程式

mpvue程式navigator中url 怎麼寫

先看下目錄結構吧要從index跳轉到expert。程式碼演示:首先在最外層的main.js配置路由:需要注意的是,配置路由的時候要寫到當前資料夾中js所在的路徑。再在跳轉的元件中寫:

mpvue程式裡面navigator點選不跳轉分析

1.一般這種情況是路徑沒有配置對,並且控制檯會報錯。2.你配置的路徑是tabbar裡定義的路徑,控制檯不報錯,但是也不會跳轉,這個時候如果你需要在導航和tabbar同時跳轉,需要加個屬性:需要注意的是,當你路徑變成非tabbar路徑時,需要把這個屬性去掉open-type="

mpvue程式元件實踐

元件: 個人理解就像函式一樣,是為了減少重複不必要的程式碼而產生的 元件的定義:  *  給定一個特定的name *  使用時在要用的檔案裡 import後,在component裡宣告 元件實現過程中自己的心得:   1. 儘量減

某課網 - 全網首發mpvue程式全棧開發

第1章 課程簡介本章節介紹了課程概述,教學方式 ,還有小程式專案的演示。第2章 原生小程式對原生小程式做一個入門的介紹,包括小程式帳號申請和開發工具安裝和使用,小程式目錄檔案的講解,再簡單把小程式原生的元件和API過一下。第3章 使用vuejs開發小程式本章節用一個todolist案例,帶著vuejs入門,再

Mpvue程式的最新規範

mpvue 是一款使用 Vue.js 開發微信小程式的前端框架。使用此框架,開發者將得到完整的 Vue.js 開發體驗,同時為 H5 和小程式提供了程式碼複用的能力。如果想將 H5 專案改造為小程式,或開發小程式後希望將其轉換為 H5,mpvue 將是十分契合的一種解決方案。 目前, mpv

DrawableLayout實現仿QQ選單

由於移動裝置的螢幕限制,在主介面同時顯示很多東西是不大顯示的事,因而很多時候我們都會把一些功能選項放在選單。但傳統的選單介面比較單調,而且互動體驗並不是很好,因此,側滑選單也因此應運而生。 實現側滑選單的方式有很多種,包括自定義控制元件,使用開源庫SlideM