小程序原生没有左滑功能 利用 view 的 bindtouchstart 和 bindtouchmove 方法来监听到控件的左滑，在左滑或者点击时，改变各控件的样式，以达到左滑编辑删除效果
Demo地址：
https://github.com/muyan091115/leftSlide.git
一、在 wxml 中写入表格和各控件 并绑定监听方法
<view class="touch-item1 {{item.isTouchMove ? 'touch-move-active1' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
<view class='content1' bindtap='showDetail' data-index="{{index}}">
<view class="cellContent1">
</view>
</view>
<view class="del1" catchtap="edit" data-index="{{index}}">编辑</view>
<view class="del1 del2" catchtap="del" data-index="{{index}}">删除</view>
</view>
监听方法：
- bindtouchstart
- bindtouchmove
通过各行数据的 isTouchMove 属性 来判断 左滑状态和正常状态的样式
二、设置个控件样式，偏移量，和动画的时长
.cellContent1 {
width: 746rpx;
height: 200rpx;
background-color: lightblue;
border: 2rpx solid black;
}
.touch-item1 {
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden;
}
.content1 {
width: 100%;
line-height: 50rpx;
margin-right: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(300rpx);
transform: translateX(300rpx);
margin-left: -300rpx;
}
.del1 {
background-color: #20aa3a;
width: 150rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(300rpx);
transform: translateX(300rpx);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.del2 {
background-color: orangered;
}
.touch-move-active1 .content1, .touch-move-active1 .del1 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.row1 {
display: flex;
flex-direction: row;
}
.column1 {
display: flex;
flex-direction: column;
}
.full_width1 {
width: 100%;
}
三、在js中初始化数据，并捕获用户动作，分发
const App = getApp();
Page({
data: {
items: [
{
name: "1"
},
{
name: "2"
},
{
name: "3"
}
]
},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
let data = App.touch._touchstart(e, this.data.items)
this.setData({
items: data
})
},
//滑动事件处理
touchmove: function (e) {
let data = App.touch._touchmove(e, this.data.items)
this.setData({
items: data
})
},
//删除事件
del: function (e) {
wx.showModal({
title: '提示',
content: '确认要删除此条信息么？',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
that.data.items.splice(e.currentTarget.dataset.index, 1)
that.setData({
items: that.data.items
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
//修改
edit: function (e) {
wx.showToast({
title: '编辑',
icon: 'success',
duration: 2000
})
},
onLoad: function () {
},
})
四、在touch.js 中处理用户动作，在app.js中导入
var startX
var startY
class touch {
constructor() {
}
_touchstart(e, items) {
console.log("touchstart---:",items);
//开始触摸时 重置所有删除
items.forEach(function (v, i) {
console.log("touchstart===:", v.isTouchMove);
if (v.isTouchMove) //只操作为true的
v.isTouchMove = false;
})
startX = e.changedTouches[0].clientX
startY = e.changedTouches[0].clientY
return items
}
_touchmove(e, items) {
var index = e.currentTarget.dataset.index, //当前索引
touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
//获取滑动角度
angle = this._angle({
X: startX,
Y: startY
}, {
X: touchMoveX,
Y: touchMoveY
});
items.forEach(function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
return items
}
_angle(start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
}
}
export default touch
_touchstart：用户点击时获取xy位置，并重置左滑状态
_touchmove：移动时根据初始位置和偏移量计算
export default touch：让外部可以使用
app.js 中导入：
import touch from '/index/touch.js'
App({
touch: new touch(),
onLaunch: function () {
}
})
网友评论