前言:实现小程序滑动删除有几种方式,文章会简单列举两种实现,先看效果。
一、使用movable-view实现滑动一、使用movable-view实现滑动一、使用movable-view实现滑动先看官方文档简单解读一下movable-area标签的基本概念。movable-area标签就是定义了一个可移动的视图容器,支持在页面中拖拽滑动,跟普通的view容器是一样的,但是也有不同之处,movable-area必须设置width和height属性,不设置默认为10px;movable-view 默认为绝对定位,top和left属性为0px。movable-areamovable-areaviewmovable-areamovable-view













我们需要用的一些属性out-of-bounds,给他定义true,让我们的容器超过可移动区域后,movable-view还可以移动,direction属性是定义我们滑动的方向,vertical是垂直滑动,horizontal是水平滑动。out-of-boundstruedirectionverticalhorizontal二、使用Touch事件实现滑动二、使用Touch事件实现滑动二、使用Touch事件实现滑动1.bindtouchstart 函数,手指触摸动作开始
2.bindtouchmove 函数,手指触摸后移动
3.bindtouchend 函数,手指触摸动作结束bindtouchstartbindtouchmovebindtouchend实现思路:
1.页面上的容器分为上下两层,上面一层显示正常加载无动作的内容,下面一层显示容器触发事件后展示的内容,例如删除、置顶、标为未读等按钮。
2.每个容器上面那一层容器我们通过css使用定位来固定,通过操纵事件来实现向需要移动的方向移动。
3.通过官方文档提供的API来实现容器随着方向移动。完整代码如下1.wxml1.wxml

使用movable-view实现左滑






inertia="true"

data-productIndex="{{index}}"

bindtouchstart="handleTouchStart"

bindtouchend="handleTouchEnd"

bindchange="handleMovableChange">





{{item.name}}

{{item.code}}





{{item.amount}}











删除


使用Touch事件实现左滑









{{item.name}}

{{item.code}}





{{item.amount}}












使用movable-view实现左滑






inertia="true"

data-productIndex="{{index}}"

bindtouchstart="handleTouchStart"

bindtouchend="handleTouchEnd"

bindchange="handleMovableChange">





{{item.name}}

{{item.code}}





{{item.amount}}











删除


使用Touch事件实现左滑









{{item.name}}

{{item.code}}





{{item.amount}}










 2.wxss2.wxss
.containerTitle {
margin: 60rpx 0 30rpx;
font-size: 40rpx;
text-align: center;
font-weight: bold;
color: #383A3D;
}

.list .product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #E9E9E9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}

.slide-product-list .slide-product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #E9E9E9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}

.list .product-item movable-area {
height: 120rpx;
width: calc(100vw - 120rpx);
}

.list .product-item movable-view {
height: 120rpx;
width: 100vw;
background: #fff;
z-index: 999;
}

.list .product-item .delete-btn {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 120rpx;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #FFFFFF;
line-height: 120rpx;
z-index: 1;
background: red;
text-align: center;
}

.list .product-item-wrap {
position: relative;
display: flex;
align-items: center;
padding: 8rpx 0 20rpx 20rpx;
box-sizing: border-box;
}

.list .product-item-wrap .product-movable-item {
flex: 1;
overflow: hidden;
}

.list .product-item-wrap .product-movable-item-name {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #71747A;
line-height: 60rpx;
margin-right: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.list .product-item-wrap .product-movable-item-code {
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #969AA3;
}

.list .product-item-wrap .product-movable-item-amount {
flex: 0 0 auto;
padding-right: 80rpx;
position: relative;
}

.list .product-item-wrap .product-movable-item-amount .amount {
width: 120rpx;
font-size: 28rpx;
color: #383A3D;
line-height: 60rpx;
}

.list .product-item-wrap .product-movable-item-amount .unit {
position: absolute;
top: 0;
right: 30rpx;
font-size: 28rpx;
color: #969AA3;
line-height: 60rpx;
}
.containerTitle {
margin: 60rpx 0 30rpx;
font-size: 40rpx;
text-align: center;
font-weight: bold;
color: #383A3D;
}

.list .product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #E9E9E9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}

.slide-product-list .slide-product-item {
position: relative;
width: 100vw;
border-bottom: 2rpx solid #E9E9E9;
box-sizing: border-box;
background: #fff;
z-index: 999;
}

.list .product-item movable-area {
height: 120rpx;
width: calc(100vw - 120rpx);
}

.list .product-item movable-view {
height: 120rpx;
width: 100vw;
background: #fff;
z-index: 999;
}

.list .product-item .delete-btn {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 120rpx;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #FFFFFF;
line-height: 120rpx;
z-index: 1;
background: red;
text-align: center;
}

.list .product-item-wrap {
position: relative;
display: flex;
align-items: center;
padding: 8rpx 0 20rpx 20rpx;
box-sizing: border-box;
}

.list .product-item-wrap .product-movable-item {
flex: 1;
overflow: hidden;
}

.list .product-item-wrap .product-movable-item-name {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #71747A;
line-height: 60rpx;
margin-right: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.list .product-item-wrap .product-movable-item-code {
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #969AA3;
}

.list .product-item-wrap .product-movable-item-amount {
flex: 0 0 auto;
padding-right: 80rpx;
position: relative;
}

.list .product-item-wrap .product-movable-item-amount .amount {
width: 120rpx;
font-size: 28rpx;
color: #383A3D;
line-height: 60rpx;
}

.list .product-item-wrap .product-movable-item-amount .unit {
position: absolute;
top: 0;
right: 30rpx;
font-size: 28rpx;
color: #969AA3;
line-height: 60rpx;
} 3.js代码3.js代码
//获取应用实例
const app = getApp()

Page({
data: {
productList: [

{

id: 1,

name: '31省市区新增境外输入13例',

code: 'Jin日头条',

amount: 5

},

{

id: 2,

name: '饲养员遭熊攻击身亡',

code: 'bai度新闻',

amount: 4

},

{

id: 3,

name: '安倍晋三参拜靖国神社',

code: '日媒',

amount: 10

}
],
slideProductList: [

{

id: 4,

name: '老兵回忆参加抗美援朝说今生无悔',

code: 'xin微博',

amount: 101

},

{

id: 5,

name: '女子下楼时玩手机踩空摔伤',

code: 'zz资讯',

amount: 500

},

{

id: 6,

name: '杨紫为离线庆生',

code: 'xx新闻',

amount: 110

}
]
},

onLoad: function () {

},

/**
* 显示删除按钮
*/
showDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, -65)
},

/**
* 隐藏删除按钮
*/
hideDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex

this.setXmove(productIndex, 0)
},

/**
* 设置movable-view位移
*/
setXmove: function (productIndex, xmove) {
let productList = this.data.productList
productList[productIndex].xmove = xmove

this.setData({

productList: productList
})
},

/**
* 处理movable-view移动事件
*/
handleMovableChange: function (e) {
if (e.detail.source === 'friction') {

if (e.detail.x < -30) {

this.showDeleteButton(e)

} else {

this.hideDeleteButton(e)

}
} else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {

this.hideDeleteButton(e)
}
},

/**
* 处理touchstart事件
*/
handleTouchStart(e) {
this.startX = e.touches[0].pageX
},

/**
* 处理touchend事件
*/
handleTouchEnd(e) {
if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {

this.showDeleteButton(e)
} else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {

this.showDeleteButton(e)
} else {

this.hideDeleteButton(e)
}
},

/**
* 删除产品
*/
handleDeleteProduct: function ({ currentTarget: { dataset: { id } } }) {
let productList = this.data.productList
let productIndex = productList.findIndex(item => item.id === id)
productList.splice(productIndex, 1)
this.setData({

productList
})
if (productList[productIndex]) {

this.setXmove(productIndex, 0)
}
},

/**
* slide-delete 删除产品
*/
handleSlideDelete({ detail: { id } }) {
let slideProductList = this.data.slideProductList
let productIndex = slideProductList.findIndex(item => item.id === id)
slideProductList.splice(productIndex, 1)
this.setData({

slideProductList
})
}
})
//获取应用实例
const app = getApp()

Page({
data: {
productList: [

{

id: 1,

name: '31省市区新增境外输入13例',

code: 'Jin日头条',

amount: 5

},

{

id: 2,

name: '饲养员遭熊攻击身亡',

code: 'bai度新闻',

amount: 4

},

{

id: 3,

name: '安倍晋三参拜靖国神社',

code: '日媒',

amount: 10

}
],
slideProductList: [

{

id: 4,

name: '老兵回忆参加抗美援朝说今生无悔',

code: 'xin微博',

amount: 101

},

{

id: 5,

name: '女子下楼时玩手机踩空摔伤',

code: 'zz资讯',

amount: 500

},

{

id: 6,

name: '杨紫为离线庆生',

code: 'xx新闻',

amount: 110

}
]
},

onLoad: function () {

},

/**
* 显示删除按钮
*/
showDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, -65)
},

/**
* 隐藏删除按钮
*/
hideDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex

this.setXmove(productIndex, 0)
},

/**
* 设置movable-view位移
*/
setXmove: function (productIndex, xmove) {
let productList = this.data.productList
productList[productIndex].xmove = xmove

this.setData({

productList: productList
})
},

/**
* 处理movable-view移动事件
*/
handleMovableChange: function (e) {
if (e.detail.source === 'friction') {

if (e.detail.x < -30) {

this.showDeleteButton(e)

} else {

this.hideDeleteButton(e)

}
} else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {

this.hideDeleteButton(e)
}
},

/**
* 处理touchstart事件
*/
handleTouchStart(e) {
this.startX = e.touches[0].pageX
},

/**
* 处理touchend事件
*/
handleTouchEnd(e) {
if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {

this.showDeleteButton(e)
} else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {

this.showDeleteButton(e)
} else {

this.hideDeleteButton(e)
}
},

/**
* 删除产品
*/
handleDeleteProduct: function ({ currentTarget: { dataset: { id } } }) {
let productList = this.data.productList
let productIndex = productList.findIndex(item => item.id === id)
productList.splice(productIndex, 1)
this.setData({

productList
})
if (productList[productIndex]) {

this.setXmove(productIndex, 0)
}
},

/**
* slide-delete 删除产品
*/
handleSlideDelete({ detail: { id } }) {
let slideProductList = this.data.slideProductList
let productIndex = slideProductList.findIndex(item => item.id === id)
slideProductList.splice(productIndex, 1)
this.setData({

slideProductList
})
}
})总结总结总结