热门标签 | 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 微信小程序之列表左滑删除功能
  • 原文地址 微信小程序之列表左滑删除功能

推荐阅读
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社区 版权所有