微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】

前言：

现在很多程序上都有左滑删除的效果，其实实现很简单，今天我们主要来记录一下小程序的左滑删除的实现过程。

效果图：

实现效果：

当我们在该条记录上进行左滑操作时，整条记录跟着向左移动，同时右侧的删除按钮会显示出来。
当我们点击删除按钮时，就会把该条记录删除掉。
如果不想删除该记录，可以右滑取消，或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。

设计思路：

首先在页面上每条 item 记录分为上下两层，上面的 view 包裹正常展示的内容，下面的 view 存放左滑的显示的内容；
元素移动使用的是 transform 属性；
这里用到的微信小程序的 api 是 touch 的相关事件：touchstart和touchmove 来实现 view 视图跟随手指移动。微信小程序 - 事件
在 touchstart 时，通过clientX, clientY或者pageX, pageY 来监听记录触摸开始时的（x, y）的位置；在 touchMove 中持续监听触摸点（x, y）的位置，并且记录下来。之后再对开始的触摸位置和结束的触摸位置进行逻辑的判断，如果移动距离大于开始的距离，那么就是右滑，将data数据中的isTouchMove 置为 false 不进行展示；如果移动距离小于开始的位置，那么就是左滑，将isTouchMove置为 true，页面中的按钮就会展示出来，可以进行删除等其他操作。

上面就是实现的思路，废话不多说，直接上代码了。

代码实现：

wxml 代码：

// touch.wxml
<view class="records_row" wx:for="{{records}}" wx:key="index"><view class="records_row_content {{item.isTouchMove ? 'touch_move' : ''}}" data-index="{{index}}"bindtouchstart="touchStart" bindtouchmove="touchMove"><view class="records_row_left"></view><view class="records_content"><view class="records_bs">{{item.identification}}</view><view class="records_time">{{item.time}}</view></view><view class="records_del" catchtap="del" data-index="{{index}}">删除</view></view>
</view>

wxss 代码：

.records_row {width: 710rpx;height: 152rpx;background: #FFFFFF;box-shadow: 0px 0px 16rpx 0px #EAEAEA;border-radius: 12rpx;margin-top: 24rpx;margin-left: 20rpx;display: flex;justify-content: space-between;align-items: center;overflow: hidden;
}.records_row_left {width: 8rpx;height: 152rpx;background: #5AC8FF;border-radius: 12rpx 0px 0px 12rpx;margin-right: 30rpx;
}.records_row_content {height: 152rpx;display: flex;flex: 1;font-size: 28rpx;font-weight: 400;color: #333333;padding-right: 58rpx;
}.records_bs {max-width: 604rpx;max-height: 80rpx;display: block;text-overflow: ellipsis;word-wrap: break-word;font-size: 28rpx;font-weight: 400;color: #333333;line-height: 40rpx;overflow: hidden;
}.records_time {font-size: 24rpx;font-weight: 400;color: #999999;line-height: 34rpx;margin-top: 8rpx;
}.records_content {width: 600rpx;display: flex;flex-direction: column;justify-content: center;
}.touch_move .records_content,
.touch_move .records_row_left,
.touch_move .records_del {transform: translateX(-100rpx);
}.touch_move .records_del {transform: translateX(-80rpx);
}.records_del {background-color: #FD7373;width: 150rpx;height: 150rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #fff;transform: translateX(80rpx);transition: all 0.4s;
}/* 如果担心transform的兼容问题，可以再加上 -webkit 前缀，-webkit-transform */

js 代码：（解释的比较清楚，大家可以看看注释）

// pages/touch/touch.js
Page({/*** 页面的初始数据*/data: {records: [{identification: '左滑删除1',time: '2020-11-04 11:02:43',isTouchMove: false //默认隐藏删除}, {identification: '左滑删除2',time: '2020-11-04 11:02:43',isTouchMove: false //默认隐藏删除}, {identification: '左滑删除3',time: '2020-11-04 11:02:43',isTouchMove: false //默认隐藏删除}],startX: 0, // 开始X坐标startY: 0, // 开始Y坐标},// 手指触摸开始事件，记录开始的(X,Y)位置touchStart: function (e) {// 开始触摸时,将 isTouchMove 为 true 的置为 false，开始新的操作this.data.records.forEach(function (item, index) {if (item.isTouchMove)item.isTouchMove = false;})// 更新数据，记录开始的位置this.setData({startX: e.changedTouches[0].clientX,startY: e.changedTouches[0].clientY,records: this.data.records})},// 手指滑动事件touchMove: function (e) {// 定义变量进行数据存储let that = thislet currentIndex = e.currentTarget.dataset.index //当前索引let startX = that.data.startX // 开始X坐标let startY = that.data.startY // 开始Y坐标let touchMoveX = e.changedTouches[0].clientX // 滑动变化X坐标let touchMoveY = e.changedTouches[0].clientY // 滑动变化Y坐标that.data.records.forEach((item, index) => {item.isTouchMove = false// 判断当前点击的是哪一个，进行操作if (index == currentIndex) {if (touchMoveX > startX) // 滑动位置大于开始位置 => 右滑item.isTouchMove = falseelse // => 左滑item.isTouchMove = true}})//更新数据that.setData({records: that.data.records})},// 删除事件del: function (e) {this.data.records.splice(e.currentTarget.dataset.index, 1)this.setData({records: this.data.records})}
})

20201207 更新

今天在看WeUI组件库时，发现新增了几个新的组件（也可能是之前就有，我没有发现），看到在表单组件中有一个 Slideview 组件，是一个左滑删除组件，跟我这个实现功能效果是一样的，所以就拿到这里跟大家一起分析一下。

至于如何使用WeUI组件库组件，不知道的小伙伴请移步至微信小程序之WeUI组件库的使用查看。

官方效果：

请看代码：

首先需要先引入相关的组件

// 在 page.json 中引入该组件
{"usingComponents": {"mp-slideview": "weui-miniprogram/slideview/slideview"}
}// 组件内部实现需要引入的组件
{"usingComponents": {"mp-cells": "../components/cells/cells","mp-cell": "../components/cell/cell","mp-slideview": "../components/slideview/slideview"}
}

page.wxml

<view class="page"><view class="page__hd"><view class="page__title">Slideview</view><view class="page__desc">左滑操作</view></view><view class="page__bd"><view class="weui-cells"><mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap"><mp-cell value="左滑可以删除" footer="说明文字"></mp-cell></mp-slideview></view><view class="weui-slidecells"><mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap"><view class="weui-slidecell">左滑可以删除（图标Button）</view></mp-slideview></view></view>
</view>

page.js

var base64 = require("../images/base64");
Page({onLoad: function(){this.setData({icon: base64.icon20,slideButtons: [{text: '普通',src: '/page/weui/cell/icon_love.svg', // icon的路径},{text: '普通',extClass: 'test',src: '/page/weui/cell/icon_star.svg', // icon的路径},{type: 'warn',text: '警示',extClass: 'test',src: '/page/weui/cell/icon_del.svg', // icon的路径}],});},slideButtonTap(e) {console.log('slide button tap', e.detail)}
});

以上代码来自官方组件库，有什么问题欢迎大家讨论学习。

就此，小程序的手动左滑删除效果基本实现，还可以在此基础上进行更多的扩展，把它变成一个更加强大的功能。

欢迎大家评论点赞，如果有任何问题欢迎留言讨论，共同进步。

微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】相关推荐

微信小程序页面左右滑动事件+回到顶部
微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要 ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序canvas2d使用封装与案例使用
微信小程序canvas2d使用封装与案例使用,看一下这边封装效果 canvas2d文档:https://www.canvasapi.cn/ 下载地址:https://download.csdn.net ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序 slider双向滑动渐变色
微信小程序 slider双向滑动渐变色要求: 两个slider组件,第一个slider组件的选择区域为渐变色,未选择区域为灰色:第二个slider组件的选择区域为灰色,未选择区域为渐变色.无论滑动哪 ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
文章目录导航路线小程序的启动过程小程序页面渲染的过程小程序中组件的分类有九大类常用的视图容器类组件小程序宿主环境-API 导航路线关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有 ...
微信小程序把玩（十九）radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml <!--设置监听器,当点击radi ...