热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序之列表左滑删除功能

介绍第一次写小程序,记录一下遇到的需求以及解决方法。可能功能不是很难,主要是做下记录。为以后遇到相同的需求做铺垫。什么是左滑删除用过QQ的人都知道,消息列表内,左滑单个聊天可以删除

介绍

  • 第一次写小程序,记录一下遇到的需求以及解决方法。可能功能不是很难,主要是做下记录。为以后遇到相同的需求做铺垫。

什么是左滑删除

  • 用过QQ的人都知道,消息列表内,左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说,这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。

《微信小程序之列表左滑删除功能》

实现原理

  • 最外层一个view水平方向排列,里面包含一个内容区view,一个操作区view
  • 让你要展示的布局充满屏幕,通过css样式让超出的删除按钮隐藏
  • 监听touch事件,平移布局显示和隐藏删除按钮(列表每一项中有一个isTouchMove属性,通过监听touch改变该属性给列表不同的样式将隐藏的按钮显示出来)

《微信小程序之列表左滑删除功能》

直接上代码

  • wxml




{{user.name}}


删除


  • wxss

.list-page{
display: flex;
flex-direction: column;
border-top: 2rpx solid #f0f0f0
}
.list-item{
height: 160rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2rpx solid #f0f0f0;
}
.item-content{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20rpx 0 20rpx;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(180rpx);
transform: translateX(180rpx);
margin-left: -200rpx;
}
.content-info{
display: flex;
width: 100%;
justify-content: space-between;
font-size: 32rpx;
color: #999
}
.content-name{
width: 100%;
}
.list-item-touch-active .item-content{
margin-left: -100rpx;
}
.list-item-touch-active .item-content, .list-item-touch-active .item-delete {
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
}
.item-delete{
width: 100rpx;
height: 160rpx;
display: flex;
justify-content: center;
align-items: center;
background: red;
color: #fff;
font-size: 32rpx;
-webkit-transform: translateX(180rpx);
transform: translateX(180rpx);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}

  • js

// pages/list/list.js
const App = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
list:[
{
id:1,
name:'张三',
phone:'15955040222',
sex:'男',
isTouchMove:false,
},
{
id: 2,
name: '张三',
phone: '15955040222',
sex: '男',
isTouchMove: false,
},
{
id: 3,
name: '张三',
phone: '15955040222',
sex: '男',
isTouchMove: false,
},
{
id: 4,
name: '张三',
phone: '15955040222',
sex: '男',
isTouchMove: false,
},
{
id: 5,
name: '张三',
phone: '15955040222',
sex: '男',
isTouchMove: false,
},
{
id: 6,
name: '张三',
phone: '15955040222',
sex: '男',
isTouchMove: false,
},
{
id: 7,
name: '张三',
phone: '15955040222',
sex: '男',
isTouchMove: false,
},
]
},
touchstart: function (e) {
//开始触摸时 重置所有删除
let data = App.touch._touchstart(e, this.data.list) //将修改过的list setData
this.setData({
list: data
})
},
//滑动事件处理
touchmove: function (e) {
let data = App.touch._touchmove(e, this.data.list,'id')//将修改过的list setData
this.setData({
list: data
})
},
})

  • 对于滑动事件的处理专门封装了一个.js文件,防止以后还会用到。

var startX
var startY
class touch {
constructor() {
}
_touchstart(e, items) {
//开始触摸时 重置所有删除
items.forEach(function (v, i) {
if (v.isTouchMove) //只操作为true的
v.isTouchMove = false;
})
startX = e.changedTouches[0].clientX
startY = e.changedTouches[0].clientY
return items
}
_touchmove(e, items,key) {
const id = e.currentTarget.dataset.id, //获取列表中每一项的唯一值,可以取id
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 (v[key] == id) { //判断滑动的id与列表中的id是否一致,如果是的话,改变滑动这一项的isTouchMove属性
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

  • 然后去引用这个touch.js文件,在app.js文件中

//app.js
import touch from './utils/touch.js'//新加
App({
globalData: {
userInfo: null
},
touch: new touch() //实例化这个touch对象
})

末尾

  • 到这里左滑删除就告一段落了,主要就是先使用css将删除按钮隐藏起来,然后通过监听touch事件去改变列表中每一项的一个属性,间接修改这个条目的样式将删除按钮显示出来
  • 源码上传至github 微信小程序之列表左滑删除功能
  • 原文地址 微信小程序之列表左滑删除功能

推荐阅读
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • Android 自定义 RecycleView 左滑上下分层示例代码
    为了满足项目需求,需要在多个场景中实现左滑删除功能,并且后续可能在列表项中增加其他功能。虽然网络上有很多左滑删除的示例,但大多数封装不够完善。因此,我们尝试自己封装一个更加灵活和通用的解决方案。 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • 开发笔记:深入解析Android自定义控件——Button的72种变形技巧
    开发笔记:深入解析Android自定义控件——Button的72种变形技巧 ... [详细]
  • Android 图像色彩处理技术详解
    本文详细探讨了 Android 平台上的图像色彩处理技术,重点介绍了如何通过模仿美图秀秀的交互方式,利用 SeekBar 实现对图片颜色的精细调整。文章展示了具体的布局设计和代码实现,帮助开发者更好地理解和应用图像处理技术。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 本文将介绍如何在混合开发(Hybrid)应用中实现Native与HTML5的交互,包括基本概念、学习目标以及具体的实现步骤。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 本文介绍了如何在 Vue 3 组合 API 中正确设置 setup() 函数的 TypeScript 类型,以避免隐式 any 类型的问题。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 在Android开发中,实现多点触控功能需要使用`OnTouchListener`监听器来捕获触摸事件,并在`onTouch`方法中进行详细的事件处理。为了优化多点触控的交互体验,开发者可以通过识别不同的触摸手势(如缩放、旋转等)并进行相应的逻辑处理。此外,还可以结合`MotionEvent`类提供的方法,如`getPointerCount()`和`getPointerId()`,来精确控制每个触点的行为,从而提升用户操作的流畅性和响应性。 ... [详细]
  • 掌握Android UI设计:利用ZoomControls实现图片缩放功能
    本文介绍了如何在Android应用中通过使用ZoomControls组件来实现图片的缩放功能。ZoomControls提供了一种简单且直观的方式,让用户可以通过点击放大和缩小按钮来调整图片的显示大小。文章详细讲解了ZoomControls的基本用法、布局设置以及与ImageView的结合使用方法,适合初学者快速掌握Android UI设计中的这一重要功能。 ... [详细]
  • 技术分享:深入解析GestureDetector手势识别机制
    技术分享:深入解析GestureDetector手势识别机制 ... [详细]
author-avatar
sundy柳
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有