vue项目实现左滑删除功能(完整代码)

 export default { name: "index", data() { return { lists: [ { title: "标题1", imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg-600", subheading: "副标题1", faddish: "爆款", price: "￥12.00", }, { title: "标题2", imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg-600", subheading: "副标题2", faddish: "爆款", price: "￥58.00", }, { title: "标题3", imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg-600", subheading: "副标题3", faddish: "爆款", price: "￥99.99", }, { title: "标题4", imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg-600", subheading: "副标题4", faddish: "爆款", price: "￥88.32", }, { title: "标题5", imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg-600", subheading: "副标题5", faddish: "爆款", price: "￥9999.99", }, ], startX: 0, //滑动开始 endX: 0, //滑动结束 }; }, methods: { // 向左滑动出现删除按钮时，点击商品信息区域取消删除 oneself() { if (this.checkSlide()) { this.restSlide(); } else { // 点击商品信息弹出弹框 alert("hello Word!"); } }, //滑动开始 touchStart(e) { // 记录初始位置 this.startX = e.touches[0].clientX; }, //滑动结束 touchEnd(e) { // 当前滑动的父级元素 let parentElement = e.currentTarget.parentElement; // 记录结束位置 this.endX = e.changedTouches[0].clientX; // 左滑大于30距离删除出现 if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) { this.restSlide(); parentElement.dataset.type = 1; } // 右滑 if (parentElement.dataset.type == 1 && this.startX - this.endX <-30) { this.restSlide(); parentElement.dataset.type = 0; } this.startX = 0; this.endX = 0; }, //判断当前是否有滑块处于滑动状态 checkSlide() { let listItems = document.querySelectorAll(".li_vessel"); for (let i = 0; i