之前在做專案的過程中有這麼乙個需求,列表左滑刪除,這裡我使用的小程式的(官方位址
)實現的,最終研究了一番,實現了產品需求。效果圖如下:
實現思路:
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...