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