展示效果图直接上代码
<view
v-for="(item, index) in arr"
:key="item.id"
@touchstart="touchstart($event)"
@touchmove="touchmove(index, $event)"
:class="['touch-item', item.isTouchMove ? 'touch-move-active' : '']"
>
<view class="content">
<view class="date_flex">
<view>
<text class="date">{{ item.data }}</text>
<text class="quantity">{{ item.text }}</text>
</view>
<view>
<u-switch space="2" v-model="value" activeColor="#FFDA00" size="40" inactiveColor="rgb(230, 230, 230)"></u-switch>
</view>
</view>
<view class="bottom_date">1, 2, 3, 4</view>
</view>
<view class="del" @tap="del(index)">
<view class="detail">
<view class="detail_img">
<img :src="require('@/static/images/detail.png')" alt="">
</view>
<view class="detail_text">删除</view>
</view>
</view>
</view>
如果要修改里面内容直接从content这个类修改就行。
export default {
data() {
return {
arr: [
{ id: '1', data: '12:00', text: '1份', isTouchMove: false },
{ id: '2', data: '12:00', text: '1份', isTouchMove: false },
],
startX: 0, //开始坐标
startY: 0,
};
},
methods: {
touchstart(e) {
console.log('start', e);
//开始触摸时 重置所有删除
this.arr.forEach((v, i) => {
if (v.isTouchMove)
//只操作为true的
v.isTouchMove = false;
});
this.startX = e.changedTouches[0].clientX;
this.startY = e.changedTouches[0].clientY;
},
//滑动事件处理
touchmove: function (indexNum, target) {
let that = this,
index = indexNum, //当前索引
startX = that.startX, //开始X坐标
startY = that.startY, //开始Y坐标
touchMoveX = target.changedTouches[0].clientX, //滑动变化坐标
touchMoveY = target.changedTouches[0].clientY, //滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.arr.forEach(function (v, i) {
v.isTouchMove = false;
//滑动超过30度角 return
if (Math.abs(angle) > 15) return;
if (i == index) {
if (touchMoveX > startX)
//右滑
v.isTouchMove = false;
//左滑
else v.isTouchMove = true;
}
});
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y;
//返回角度 /Math.atan()返回数字的反正切值
return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
},
//删除事件
del: function (index) {
this.arr.splice(index, 1);
},
},
};
.touch-item {
font-size: 28rpx;
display: flex;
justify-content: space-between;
width: 100%; // 少一个会看到按钮
overflow: hidden;
margin-top: 40rpx;
}
.content {
width: 100%;
padding: 20rpx;
line-height: 44rpx;
margin-right: 0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -154rpx;
.date_flex {
display: flex;
justify-content: space-between;
.date {
font-size: 40rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-right: 49rpx;
}
.quantity {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ff9200;
}
}
.bottom_date {
margin-top: 10rpx;
}
}
.del {
background-color: orangered;
width: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
.detail {
.detail_img {
text-align: center;
img {
width: 30rpx;
height: 30rpx;
}
}
.detail_text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
直接复制粘贴就行。拿上直接用。
如果遇到滑动会导致上下抖动用这个解决。给最外层得一个view标签加一个样式。文章来源：https://www.toymoban.com/news/detail-514511.html
.rev {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
overflow: hidden;
}
这样的话滑动会有阴影，但不会抖动，可以尝试一下看看，如果哪位能人能解决，就麻烦分享一下了 。在此谢过。文章来源地址https://www.toymoban.com/news/detail-514511.html
到了这里，关于微信小程序、uniapp使用touchstart和touchmove左右滑动删除。以及解决上下抖动问题。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
