小程式左滑刪除之實現

2022-07-31 21:33:11 字數 4059 閱讀 8726

之前在做專案的過程中有這麼乙個需求,列表左滑刪除,這裡我使用的小程式的(官方位址

)實現的,最終研究了一番,實現了產品需求。效果圖如下:

實現思路:

1、最外層標籤使用movable-area標籤,寬高必須固定;

2、子標籤必須使用movable-view,寬高和父元素movable-area一樣,不是子標籤無法移動;

3、使用view標籤將,列表內容和刪除按鈕包裹起來;

4、列表內容和刪除按鈕使用css屬性transform: translatex(108rpx)設定,達到隱藏刪除按鈕的目的;再給列表內容新增屬性margin-left: -180px,使其正常顯示;

5、使用movable-area標籤實現左滑刪除,適用於高度固定的列表;

6、若出現蘋果真機頁面還能整體左滑的問題,可在最外層標籤新增css屬性overflow-x: hidden,就可以解決頁面整體滑動的問題了;

**部分:

<

view

class

="container"

>

<

view

class

="mess padding"

>考勤規則相同的人設定到同一考勤組,以便於統計

view

>

<

block

wx:for

="}"

wx:key

="index"

>

<

movable-area

class

='movable-area'

>

<

movable-view

direction

="horizontal"

class

='movable-view

bg_white'

>

<

view

class

="touch-item }"

data-index

="}"

bindtouchstart

="touchstart"

bindtouchmove

="touchmove"

>

<

view

class

="content"

bindtap

='todetail'

data-id

="}"

>

<

view

class

="attendance_name font_size"

>}

view

>

<

view

class

="attendance_text flex-x"

>

<

view

class

="attendance_text_l font_size"

>成員:

view

>

<

view

class

="attendance_text_r font_size"

>}人

view

>

view

>

<

view

class

="attendance_text flex-x"

>

<

view

class

="attendance_text_l font_size"

>負責人:

view

>

<

view

class

="attendance_text_r font_size"

>}

view

>

view

>

<

view

class

="attendance_text flex-x"

>

<

view

class

="attendance_text_l font_size"

>固定班制:

view

>

<

view

class

="attendance_text_r font_size"

>}至} }-}

view

>

view

>

view

>

<

view

class

="del bg_red font_size"

catchtap

="del"

data-idx

="}"

>刪除

view

>

view

>

movable-view

>

movable-area

>

block

>

<

view

class

="btn font_size padding"

bindtap

="addattendance"

>+新增考勤組

view

>

view

>

/*

pages/index/index.wxss

*/page .font_size .mess .mess .btn

/*列表布局

*/.movable-area .movable-view .touch-item .content .del .touch-move-active .content, .touch-move-active .del .attendance_name .attendance_text > view .attendance_text_l .attendance_text_r

//

pages/index/index.js

page(,

,],

//考勤組列表

startx: 0, //

開始x座標

starty: 0, //

開始y座標

}, /**

* 生命週期函式--監聽頁面載入

*/onload:

function

(options) ,

/*** 手指觸控動作開始 記錄起點x座標

*/touchstart:

function

(e)

})this

.setdata()

},/**

* 滑動事件處理,一次只能滑出乙個刪除按鈕

*/touchmove:

function

(e) , );

that.data.list.foreach(

function

(v, i)

if (i ==index)

else }})

that.setdata()

},/**

* 計算滑動角度

* start 起點座標

* end 終點座標

*math.pi表示乙個圓的周長與直徑的比例,約為 3.14159;pi就是圓周率π,pi是弧度制的π,也就是180°

*/angle:

function

(start, end) ,

/*** 刪除

*/del(e) )

} else}})

},

})

小程式左滑刪除

儲存之 wxml 刪除哈哈 wxss touch item content del touch move active content,touch move active del jspage onload function this.setdata 手指觸控動作開始 記錄起點x座標 touchst...

小程式實現左滑刪除效果

小程式的左滑刪除效果用的是元件 movable area 和 movable view 文件 1 movable area這個就是定義了乙個移動的區域,跟普通的的含義是一樣的,不同在於,接著往下看 注意 movable area 必須設定width和height屬性,不設定預設為10px 2 mov...

小程式的左滑刪除功能的實現

我們先來看html部分 先要建立刪除的按鈕,設定好樣式,然後大框設定樣式把他隱藏起來overflow hidden 下面是刪除的css deleteclass監控手指開始觸控的地方,和移動的距離,還有最後結束時的位置,接下來就是判斷了 以下是js部分 touchs function e this.s...