柚子快報(bào)邀請碼778899分享：微信小程序?qū)崿F(xiàn)左滑刪除

http://yzkb.51969.com/

一、效果

二、代碼

? 實(shí)現(xiàn)思路使用的是官方提供的movable-area 嵌套movable-view

1、movable-area：注意點(diǎn)，需要設(shè)置其高度，否則會出現(xiàn)列表內(nèi)容重疊的現(xiàn)象。

2、由于movable-view需要向右移動，左滑的時候給刪除控件展示的空間，故?movable-area 需要左移 left: -120rpx;

3、movable-view右移left: 120rpx;。 通過 width: calc(100% - 120rpx);左劃的距離。

4、 需要給movable-view組件設(shè)置層級?z-index: 1001;越高越好至少比刪除組件層級高，避免被遮住。

?5、 刪除 的位于movable-view組件右下，左滑movable-view顯示處刪除組件。

.moveArea { ? display: flex; ? flex-direction: row; ? width: calc(100% + 120rpx); ? justify-content: center; ? left: -120rpx; ? height: 188rpx; } ?

movable-view

.movableView { ? display: flex; ? flex-direction: row; ? width: calc(100% - 120rpx); ? z-index: 1001; ? left: 120rpx; }

源代碼如下：

Page({

/**

* 頁面的初始數(shù)據(jù)

*/

data: {

pushedData:[{messageTitle:'餅干',messageContent:'餅干愛吃'}],//已推送數(shù)據(jù)

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad() {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady() {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow() {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide() {

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload() {

},

/**

* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh() {

},

/**

* 頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom() {

},

/**

* 用戶點(diǎn)擊右上角分享

*/

onShareAppMessage() {

},

// 退出頁面

logout:function(){

wx.navigateBack({})

},

})

xml代碼

返回

數(shù)據(jù)中心

{{itemName.pushTime}}

{{itemName.messageTitle}}

{{itemName.messageContent}}

刪除

css代碼

/* pakage_kindness_remind/pages/kindess_msg_remind/kindness_msg_remind_pg.wxss */

Page {

background: #f0f0f0;

height: 100%;

position: fixed;

}

/* 頭部搜索 */

/* 搜索標(biāo)題 */

.title_search {

background: linear-gradient(to right, #0455a7, #62c8ec);

height: 170rpx;

width: 100%;

display: flex;

flex-direction: row;

align-items: flex-end;

justify-content: flex-start;

}

.seeck_md {

display: flex;

flex-direction: row;

width: 100%;

justify-content: flex-start;

align-items: flex-end;

}

/* 消息 */

.msg {

width: 180rpx;

height: 90rpx;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

margin-right: 0rpx;

margin-left: 30rpx;

}

.msg_title_center {

width: 100%;

display: flex;

flex-direction: row;

justify-content: center;

}

.msg_txt {

font-size: 36rpx;

height: 80rpx;

width: 160rpx;

margin-bottom: 20rpx;

align-items: center;

color: #fff;

display: flex;

justify-content: center;

}

/* 返回 */

.logout {

width: 100rpx;

height: 90rpx;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

margin-right: 20rpx;

margin-left: 30rpx;

}

.logout_ic {

height: 44rpx;

width: 48rpx;

margin-right: 2rpx;

}

.logout_txt {

font-size: 24rpx;

height: 40rpx;

width: 60rpx;

margin-bottom: 10rpx;

align-items: flex-start;

color: #fff;

display: flex;

justify-content: flex-start;

}

/* 搜索標(biāo)題 */

/* 頭部搜索 */

/* body */

.scbg {

background-color: #f0f0f0;

width: 100%;

height: calc(100vh - 180rpx);

left: 0rpx;

right: 0rpx;

top: 0rpx;

padding-bottom: 120rpx;

}

/* item條目布局 */

/* item父布局 */

.item_parent {

margin-top: 20rpx;

}

.date {

display: flex;

align-items: center;

justify-content: center;

color: #999999;

font-size: 28rpx;

margin-bottom: 10rpx;

}

/* item盒子 */

.box_item {

background-color: #fff;

margin-left: 25rpx;

margin-right: 25rpx;

border-radius: 20rpx;

flex-direction: column;

width: 100%;

height: 160rpx;

display: flex;

}

/* item模塊時間 */

/* item上部分布局 */

.head_layout {

height: 60rpx;

border-radius: 20rpx;

margin-right: 20rpx;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

}

/* 標(biāo)題 */

.head_title {

width: 160rpx;

display: flex;

align-items: center;

justify-content: flex-start;

margin-left: 20rpx;

color: #06c8ad;

font-size: 28rpx;

font-weight: 800;

}

/* item下部份分布局 */

.body_layout {

background-color: #fff;

padding-bottom: 20rpx;

border-radius: 20rpx;

margin-bottom: 16rpx;

align-items: center;

margin-left: 20rpx;

margin-top: 10rpx;

margin-right: 10rpx;

font-size: 28rpx;

color: #999999;

}

/* 滑動刪除移動模塊 */

.moveArea {

display: flex;

flex-direction: row;

width: calc(100% + 120rpx);

justify-content: center;

left: -120rpx;

height: 188rpx;

}

/* 滑動刪除模塊 */

.movableView {

display: flex;

flex-direction: row;

width: calc(100% - 120rpx);

z-index: 1001;

left: 120rpx;

}

/* item刪除 */

.itemDelet {

position: absolute;

right: 30rpx;

line-height: 160rpx;

background-color: #62c8ec;

margin-top: 0rpx;

margin-right: 6rpx;

border-bottom-right-radius: 20rpx;

border-top-right-radius: 20rpx;

width: 120rpx;

text-align: right;

padding-right: 20rpx;

color: #fff;

}

柚子快報(bào)邀請碼778899分享：微信小程序?qū)崿F(xiàn)左滑刪除

http://yzkb.51969.com/

文章來源