微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)

實(shí)現(xiàn)代碼:

1霸妹、wxml touch-item元素綁定了bindtouchstart瞻赶、bindtouchmove事件

<view class="container">
 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
  <view class="content">{{item.content}}</view>
  <view class="del" catchtap="del" data-index="{{index}}">刪除</view>
 </view>
</view>

2维雇、wxss flex布局赊舶、css3動(dòng)畫

.touch-item {
 font-size: 14px;
 display: flex;
 justify-content: space-between;
 border-bottom:1px solid #ccc;
 width: 100%;
 overflow: hidden
}
.content {
 width: 100%;
 padding: 10px;
 line-height: 22px;
 margin-right:0;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: translateX(90px);
 transform: translateX(90px);
 margin-left: -90px
}
.del {
 background-color: orangered;
 width: 90px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #fff;
 -webkit-transform: translateX(90px);
 transform: translateX(90px);
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

3睁搭、js 注釋很詳細(xì)

var app = getApp()
Page({
 data: {
  items: [],
  startX: 0, //開始坐標(biāo)
  startY: 0
 },
 onLoad: function () {
  for (var i = 0; i < 10; i++) {
   this.data.items.push({
    content: i + " 向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦,向左滑動(dòng)刪除哦",
    isTouchMove: false //默認(rèn)全隱藏刪除
   })
  }
  this.setData({
   items: this.data.items
  })
 },
 //手指觸摸動(dòng)作開始 記錄起點(diǎn)X坐標(biāo)
 touchstart: function (e) {
  //開始觸摸時(shí) 重置所有刪除
  this.data.items.forEach(function (v, i) {
   if (v.isTouchMove)//只操作為true的
    v.isTouchMove = false;
  })
  this.setData({
   startX: e.changedTouches[0].clientX,
   startY: e.changedTouches[0].clientY,
   items: this.data.items
  })
 },
 //滑動(dòng)事件處理
 touchmove: function (e) {
  var that = this,
   index = e.currentTarget.dataset.index,//當(dāng)前索引
   startX = that.data.startX,//開始X坐標(biāo)
   startY = that.data.startY,//開始Y坐標(biāo)
   touchMoveX = e.changedTouches[0].clientX,//滑動(dòng)變化坐標(biāo)
   touchMoveY = e.changedTouches[0].clientY,//滑動(dòng)變化坐標(biāo)
   //獲取滑動(dòng)角度
   angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
  that.data.items.forEach(function (v, i) {
   v.isTouchMove = false
   //滑動(dòng)超過(guò)30度角 return
   if (Math.abs(angle) > 30) return;
   if (i == index) {
    if (touchMoveX > startX) //右滑
     v.isTouchMove = false
    else //左滑
     v.isTouchMove = true
   }
  })
  //更新數(shù)據(jù)
  that.setData({
   items: that.data.items
  })
 },
 /**
  * 計(jì)算滑動(dòng)角度
  * @param {Object} start 起點(diǎn)坐標(biāo)
  * @param {Object} end 終點(diǎn)坐標(biāo)
  */
 angle: function (start, end) {
  var _X = end.X - start.X,
   _Y = end.Y - start.Y
  //返回角度 /Math.atan()返回?cái)?shù)字的反正切值
  return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
 },
 //刪除事件
 del: function (e) {
  this.data.items.splice(e.currentTarget.dataset.index, 1)
  this.setData({
   items: this.data.items
  })
 }
})
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市笼平,隨后出現(xiàn)的幾起案子园骆,更是在濱河造成了極大的恐慌,老刑警劉巖寓调,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件锌唾,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡夺英,警方通過(guò)查閱死者的電腦和手機(jī)晌涕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)痛悯,“玉大人余黎,你說(shuō)我怎么就攤上這事≡孛龋” “怎么了惧财?”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)扭仁。 經(jīng)常有香客問(wèn)我垮衷,道長(zhǎng),這世上最難降的妖魔是什么乖坠? 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任搀突,我火速辦了婚禮,結(jié)果婚禮上熊泵,老公的妹妹穿的比我還像新娘描姚。我一直安慰自己涩赢,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開白布轩勘。 她就那樣靜靜地躺著筒扒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪绊寻。 梳的紋絲不亂的頭發(fā)上花墩,一...
    開封第一講書人閱讀 49,036評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音澄步,去河邊找鬼冰蘑。 笑死,一個(gè)胖子當(dāng)著我的面吹牛村缸,可吹牛的內(nèi)容都是我干的祠肥。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼梯皿,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼仇箱!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起东羹,我...
    開封第一講書人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤剂桥,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后属提,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體权逗,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年冤议,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了斟薇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡恕酸,死狀恐怖堪滨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情尸疆,我是刑警寧澤椿猎,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站寿弱,受9級(jí)特大地震影響犯眠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜症革,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一筐咧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦量蕊、人聲如沸铺罢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)韭赘。三九已至,卻和暖如春势就,著一層夾襖步出監(jiān)牢的瞬間泉瞻,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工苞冯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留袖牙,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓舅锄,卻偏偏與公主長(zhǎng)得像鞭达,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子皇忿,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 每天的學(xué)習(xí)記錄畴蹭,可能有的地方寫的不對(duì),因?yàn)閯倢W(xué)禁添,以后發(fā)現(xiàn)錯(cuò)的話會(huì)回來(lái)改掉整體流程 https://develope...
    有點(diǎn)健忘閱讀 4,626評(píng)論 0 7
  • create by jsliang on 2018-9-17 17:58:56 Recently revised...
    梁_飄閱讀 1,573評(píng)論 0 6
  • 0撮胧、雜記 0.1桨踪、在實(shí)際的開發(fā)中老翘,圖片資源不會(huì)存儲(chǔ)在小程序的目錄中,因?yàn)樾〕绦虻拇笮〔荒艹^(guò)1MB(現(xiàn)在改為2M)...
    it筱竹閱讀 5,312評(píng)論 0 10
  • 前言 微信之父張小龍?jiān)谀瓿醯哪谴窝葜v中曾表示:“我自己是很多年的程序員锻离,我覺得我們應(yīng)該為開發(fā)的團(tuán)隊(duì)做一些事情”铺峭。幾...
    4638d5195a5f閱讀 1,372評(píng)論 0 2
  • 前言 最近不是很忙,F(xiàn)lutter和RN都有點(diǎn)整不動(dòng)了汽纠,(此時(shí)流下了老奶奶基礎(chǔ)太差卫键,腦子又笨,咸咸的淚水)虱朵,想著補(bǔ)...
    周南城閱讀 3,987評(píng)論 2 7