微信小程序实现滑动删除效果
作者:东边的小山 发布时间:2024-04-19 10:03:45
标签:微信小程序,滑动删除
最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧布局,最终放弃了。
还是自己写个吧,利用手势事件。遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了。
item的布局:
推荐小程序优先使用flex布局,完全够用。这也是微信推荐的。
<view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam.id}}" class="item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{cardTeam.right}}px">
<image class="img" src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" mode="scaleToFill"></image>
<view class="number-wrapper">
<text class="name">{{cardTeam.name}}</text>
<view class="count-wrapper">
<view class="decrease-btn">-</view>
<text class="count">1</text>
<view class="increase-btn">+</view>
</view>
<view class="price-wrapper">
<text class="unit">¥</text>
<text class="price">99.80</text>
</view>
</view>
<view class="ok"><view class="inner-ok">确定</view></view>
<view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>删除</view></view>
</view>
主要是将删除按钮的设为绝对定位(position: absolute):
.item .remove{
width: 60px;
height: 100%;
background-color: red;
position: absolute;
top: 0;
right: -60px;
display: flex;
justify-content: center;
align-items: center;
}
Page({
data: {
cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"http://www.see-source.com", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"http://www.see-source.com", "right":0, "startRight":0}]
},
drawStart : function(e){
// console.log("drawStart");
var touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
var cardTeams = this.data.cardTeams;
for(var i in cardTeams){
var data = cardTeams[i];
data.startRight = data.right;
}
key = true;
},
drawEnd : function(e){
console.log("drawEnd");
var cardTeams = this.data.cardTeams;
for(var i in cardTeams){
var data = cardTeams[i];
if(data.right <= 100/2){
data.right = 0;
}else{
data.right = maxRight;
}
}
this.setData({
cardTeams:cardTeams
});
},
drawMove : function(e){
//console.log("drawMove");
var self = this;
var dataId = e.currentTarget.id;
var cardTeams = this.data.cardTeams;
if(key){
var touch = e.touches[0];
endX = touch.clientX;
endY = touch.clientY;
console.log("startX="+startX+" endX="+endX );
if(endX - startX == 0)
return ;
var res = cardTeams;
//从右往左
if((endX - startX) < 0){
for(var k in res){
var data = res[k];
if(res[k].id == dataId){
var startRight = res[k].startRight;
var change = startX - endX;
startRight += change;
if(startRight > maxRight)
startRight = maxRight;
res[k].right = startRight;
}
}
}else{//从左往右
for(var k in res){
var data = res[k];
if(res[k].id == dataId){
var startRight = res[k].startRight;
var change = endX - startX;
startRight -= change;
if(startRight < 0)
startRight = 0;
res[k].right = startRight ;
}
}
}
self.setData({
cardTeams:cardTeams
});
}
},
//删除item
delItem: function(e){
var dataId = e.target.dataset.id;
console.log("删除"+dataId);
var cardTeams = this.data.cardTeams;
var newCardTeams = [];
for(var i in cardTeams){
var item = cardTeams[i];
if(item.id != dataId){
newCardTeams.push(item);
}
}
this.setData({
cardTeams:newCardTeams
});
},
onLoad: function () {
console.log('onLoad:'+app.globalData.domain)
}
})
drawStart用于记录手指触碰时的位置,drawMove记录手指滑动的位置,两者的差值就是删除按钮的偏移量
drawEnd手指抬起时触发,用于设置弹回、摊开效果。目前我的是超过一半自动弹开,不足一半自动收回。
0
投稿
猜你喜欢
- 看下面的Java代码,目的是为了当i是3的时候,就不做输出,直接跳到下一个循环。int i = 0; 
- 前言我们在往期对matplotlib.pyplot()方法学习,到现在我们已经会绘制折线图、柱状图、散点等常规的图表啦(往期的内容如下,大家
- 根据国务院文件,5.19-5.21为全国哀悼日,在此期间,全国和各驻外机构下半旗志哀,停止公共娱乐活动,外交部和我国驻外使领馆设立吊唁簿。5
- 前面两天带着大家换了一个口味,带着大家学习了pyecharts的原理和部分图形制作。今天我们继续回归带你学MySQL系列,带着大家继续学习M
- 如下所示:import numpy as npfrom torchvision.transforms import Compose, ToT
- 这篇文章主要介绍了python错误调试及单元文档测试过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 1. 资料1) Protobuf 开发文档https://protobuf.dev/2) protobuf安装指南https://grpc.
- 背景:使用pip install SciPy的格式安装python函数库SciPy的时候,发现老是报错,从网上找信息也没找到合适的解决办法,
- 本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理。1.URLError首先解释下URLError可能产生的原
- 简介MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT 语句进行分析, 并输出 SELECT 执行的详细信息, 以供开发
- 最近,我们老大要我写一个守护者程序,对服务器进程进行守护。如果服务器不幸挂掉了,守护者能即时的重启应用程序。上网Google了一下,发现Py
- psutil是什么psutil是一个能够获取系统信息(包括进程、CPU、内存、磁盘、网络等)的Python模块。主要用来做系统监控,性能分析
- 本文实例讲述了Python实现带参数的用户验证功能装饰器。分享给大家供大家参考,具体如下:user_list = [ {'
- Python语言中import的使用很简单,直接使用 import module_name 语句导入即可。这里我主要写一下"imp
- python 中有6大标准类型:数字(Number)字符串(String)列表(List)元组(Tumple)集合(Set)字典(Dicti
- 前言玩博客一个多月了,渐渐发现了一些有意思的事,经常会有人用同样的评论到处刷,不知道是为了加没什么用的积分,还是纯粹为了表达楼主好人。那么问
- 1、远程服务器上安装jupyter notebook(配置jupyter_notebook_config.py文件)sudo pip ins
- 本文实例讲述了JS实现获取毫秒值及转换成年月日时分秒的方法。分享给大家供大家参考,具体如下:时间日期对象创建方式一var date=new
- 安装正常情况,只需pip install PIL==1.1.7或者pip install Pillow==2.9.0即可。但需留意安装后的输
- Turtle库是Python内置的图形化模块,属于标准库之一,位于Python安装目录的lib文件夹下,常用函数有以下几种:画笔控制函数pe