小程序滴滴车主板块的银行卡管理左滑删除编辑

最近在类似于滴滴软件的一款小程序,工程确实有点大,很多东西都是第一次做。这次记录一下关于左滑删除的一个代码记录。主要的思想就是计算滑动距离的大小来使用css中的 transition 控制滑动的效果,主流的都是控制边距margin来达到左滑的效果。

根据我所拿到的ui,我所运用的是使用宽度和radius来达到左滑的效果,造一个属性值,并塞进遍历数组进行判断是true还是false来控制样式。

 

 完成效果:

 

 

html

 

<view class='content'>
<view class='item-box' wx:for="{{bankList}}" wx:key="index">
<view class="card-item {{item.txtStyle=='true' ? 'txtStyleFalse':'txtStyleTrue'}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"  data-index="{{index}}">
<view class='bank'>{{item.bank}}</view>
<view class='names'>{{item.names}}</view>
<view class='card-num'>{{item.cardNum}}</view>
</view>
<view class='handle flex-box-start-top'>
<view class='edit'>编辑</view>
<view class='delect'>删除</view>
</view>
</view>  
</view>

 

 

 

js

/**
* 页面的初始数据
*/
data: {
bankList:[
{ 'bank':'中国建设银行(建安支行)',
'names':'章三',
'cardNum':'***** ******* ***** ***0910'
},
{
'bank': '中国工商银行(建安支行)',
'names': '章三',
'cardNum': '***** ******* ***** ***0910'
},
],
editIndex: 0,
delBtnWidth:180//删除按钮宽度单位(rpx)
  },
/*自定义方法--start */
//
  touchS: function (e) {
if (e.touches.length == 1) {
this.setData({
stX: e.touches[0].clientX
});
}
},
touchM: function (e) {
console.log("touchM:"   e);
var that = this
if (e.touches.length == 1) {
//记录触摸点位置的X坐标 
var moveX = e.touches[0].clientX; 
//计算手指起始点的X坐标与当前触摸点的X坐标的差值 
var disX = that.data.stX - moveX;
//delBtnWidth 为右侧按钮区域的宽度 
var delBtnWidth = that.data.delBtnWidth; 
var txtStyle = "true"; 
if(disX == 0 || disX < 0){
//如果移动距离小于等于0,文本层位置不变 width: 660rpx;border-radius: 10rpx;
// txtStyle = "left:0px"; 
txtStyle = "true"; 
}else if(disX > 0 ){
//移动距离大于0,文本层left值等于手指移动距离 width: 470rpx;border-radius: 10rpx 0px 0px 10rpx;
// txtStyle = "left:-" disX "px";
txtStyle = "false"; 
// if(disX>=delBtnWidth){ 
//   //控制手指移动距离最大值为删除按钮的宽度 
//   txtStyle = "left:-" delBtnWidth "px"; 
// }
      } 
//获取手指触摸的是哪一个item 
var index = e.currentTarget.dataset.index; 
var list = that.data.bankList; 
//将拼接好的样式设置到当前item中
list[index].txtStyle = txtStyle; 
//更新列表的状态
this.setData({ bankList:list }); 
// console.log(this.data.bankList)
    } 
},
touchE: function (e) {
console.log("touchE"   e);
var that = this 
if (e.changedTouches.length == 1) {
//手指移动结束后触摸点位置的X坐标 
var endX = e.changedTouches[0].clientX; 
//触摸开始与结束,手指移动的距离
var disX = that.data.stX - endX; 
var delBtnWidth = that.data.delBtnWidth; 
//如果距离小于删除按钮的1/2,不显示删除按钮 
var txtStyle = disX > delBtnWidth/2 ? "true":"false";
//获取手指触摸的是哪一项 
var index = e.currentTarget.dataset.index;
var list = that.data.bankList; list[index].txtStyle = txtStyle; 
//更新列表的状态 
      that.setData({ bankList:list });
}
},
/*自定义方法--end */

 

感谢博文:https://www.jianshu.com/p/07c4ddf8a3d3

提供的思路和方法,以上多数js方法摘自此博文。当然css的控制也是很重要的

 

本文转载于:猿2048➜https://www.mk2048.com/blog/blog.php?id=iiaii1j&title=小程序滴滴车主板块的银行卡管理左滑删除编辑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华菱重卡仪表指示说明_仪表装置11种常见故障的解决方法

1. 转速表工作不正常或停止工作首先检查转速表背面的黑色3孔插头与插座接触是否良好及电压正常与否。3个端子的连接情况&#xff1a;端子a是电源负极&#xff0c;与仪表盘14孔白色插座上的棕色导线连接后搭铁(仪表盘上所有搭铁点均由棕色导线汇集在一起&#xff0c;并通过胶布包…

ASP .NET SVN emmet 插件

学习 ASP .NET 时间的第三周&#xff1a; 来讲讲如何在 visual studio 2013...上搭载 SVN吧: 废话不多说&#xff1a; One Step&#xff1a; 电脑上已安装 visual studio 2013 等版本&#xff08;未安装时 红色区域是不存在的&#xff09; Two Step&#xff1a; 从官网上下载对…

iptables 配置后连接不上数据库_Linux服务器配置-VSFTP服务配置(三)

上文&#xff1a;Linux服务器配置-VSFTP服务配置(二)一、vsftpd服务防火墙配置1、主动(POST)模式 FTP 防火墙配置CentOS6 系统 iptables 的配置iptables -t filter --line-number -nL INPUT#显示现有防火墙规则&#xff0c;查看是否开启20、21号端口。iptables -t filter -I IN…

下标索引必须为正整数类型或逻辑类型_Python3 基本数据类型

Python中的变量不需要声明。每个变量在使用前都必须赋值&#xff0c;变量赋值以后该变量才会被创建。在Python中&#xff0c;变量就是变量&#xff0c;它没有类型&#xff0c;我们所说的"类型"是变量所指的内存中对象的类型。Python 3中有六个标准的数据类型&#xf…

noip模拟赛 写代码

分析&#xff1a;这其实就是括号匹配题&#xff0c;一眼贪心题&#xff0c;不过一开始贪错了&#xff0c;以为([)]是合法的......其实括号之间不能嵌套. 一开始的想法是尽量往左边填左括号&#xff0c;因为每种括号的数量都确定了&#xff0c;那么左括号和右括号的数量也就确定…

行内元素和块元素以及行内块元素的特点

一、背景 初学html&#xff0c;接触很多标签 <h1>、<p>、<span>、<ul>、<em>等&#xff0c;当写出简单的小页面的时候&#xff0c;例如仅仅是一篇带有标题的文章&#xff0c;标题 <h1>标签单独一行&#xff0c;不管后面有多大的空间&…

软件测试的功能测试和性能测试,大型软件的功能测试流程及性能测试流程

大型软件具有涉及子模块繁多、建设过程复杂、功能全面、性能具有较高要求的特点。依据ISO/IEC 9126软件产品评估标准&#xff0c;需要对软件的功能性、可靠性、可用性、效率、可维护性、可移植性等方面进行评估。因此&#xff0c;需要有一种方法能够对大型软件进行测试&#xf…

vue 分模块打包 脚手架_Vue面试官最爱的底层源码问题,你可以这样回答!

最近看到身边很多人都在投简历&#xff0c;有因为企业裁员的&#xff0c;有因为自己想跳槽的&#xff0c;原因不一&#xff0c;但是最终大家都会需要接触到面试这个事情。但是很多人对待面试不够认真&#xff0c;只会等待结果&#xff0c;不去努力。所以这边想整理一些懒人面试…

re.containerbase.startinternal 子容器启动失败_Python项目容器化实践(二) Docker Machine和Docker Swarm...

前言这篇文章介绍Docker生态中的常被提到的Engine、Machine和Swarm&#xff0c;大家以了解为主&#xff0c;工作需要再深入。EngineDocker Engine其实就是我们常说的「Docker」&#xff0c;它是一个C/S模型(Client/Server)的应用&#xff0c;包含如下组件:Daemon。守护进程&…

基于设备树的TQ2440的中断(2)

下面以按键中断为例看看基于设备数的中断的用法&#xff1a; 设备树&#xff1a; tq2440_key {compatible "tq2440,key";interrupt-parent <&gpf>;interrupts <0 IRQ_TYPE_EDGE_FALLING>, <1 IRQ_TYPE_EDGE_FALLING>;key_3 <&gpf 2…

计算机里有个不能进入的磁盘分区,新电脑只有一个分区怎么办? 教你们如何不进pe给硬盘创建新分区!...

很多朋友新电脑刚买回来打开发现明明自己机械硬盘1T或者1T机械加128G固态&#xff0c;但是却只有一个或者两个分区&#xff0c;但是又不会分区现在教大家如何不用老毛桃大白菜之类的进pe系统里面就能直接创建新分区1 WinR输入diskmgmt.msc2进入磁盘管理可以查看本机的C盘与E盘的…

OSGi中的权限

在上一篇文章中 &#xff0c;我们介绍了为Java应用程序实现沙箱的方法&#xff0c;在其中我们可以安全地运行移动代码 。 这篇文章探讨了如何在OSGi环境中执行相同的操作。 OSGi OSGi规范 为Java定义了一个动态模块系统 。 因此&#xff0c;它是实施那种可以使您的应用程序动…

HTTP简单教程

目录 HTTP简介 HTTP工作原理 HTTP消息结构 客户端请求消息服务器响应消息实例 HTTP请求方法HTTP响应头信息HTTP状态码 HTTP状态码分类HTTP状态码列表 HTTP content-type对照表 HTTP简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写&…

Reversed-Z详解

在3D渲染管线中&#xff0c;Z这个家伙几乎无处不在&#xff0c;如Z-Buffer&#xff0c;Early-Z&#xff0c;Z-Cull&#xff0c;Z-Test&#xff0c;Z-Write等等&#xff0c;稍有接触图形学的人都会对这些术语有所耳闻。 那么Z到底是什么呢&#xff1f;首先Z当然可以是任意坐标系…

pyqt开发的程序模板_小程序定制开发和模板开发要多少钱?有什么区别?

到现在&#xff0c;小程序开发已经有了1年多的历史&#xff0c;已经达到百万数量级。无论是小程序商城还是小程序游戏&#xff0c;其开发方式不外乎两种&#xff0c;一种是定制开发&#xff0c;另一种是模板开发。对于很多初次接触小程序的客户来说&#xff0c;还不知道小程序的…

html 三列布局(两列自适应,一列固定宽度)

不做过多解释&#xff1a;主要是记录一个完整的布局样式&#xff0c;实现页面大致三列其中左右两列是自适应宽度&#xff0c;中间固定宽度效果。 不多少代码奉上&#xff1a; CSS样式代码&#xff1a; /*********************公共标签样式********************//************…

单曲循环 翻译_歌单 | 单曲循环amp;热评

December2020/12/ 写在前面的话 /本来打算在跨年的时候才更文&#xff0c;但是吧又觉得空出这最后一个月有点苍白&#xff0c;然后最近一直夜半网抑云(敏感ing)就想到可以做一期分享歌单的推文&#xff0c;分享一些最近听得频繁的歌曲(还不是刷抖音刷出来的)。《暧昧》// 王菲徘…

休息使用Jersey –包含JAXB,异常处理和客户端程序的完整教程

最近&#xff0c;我开始使用Jersey API开发一个Restful Web服务项目。 在线提供了一些教程&#xff0c;但是我遇到了异常处理方面的一些问题&#xff0c;而且在使用JaxB和提供异常处理方法的完整项目中找不到任何地方。 因此&#xff0c;一旦我能够使用带有异常处理和客户端程序…

【转】Java方向如何准备BAT技术面试答案(汇总版)

原文地址&#xff1a;http://www.jianshu.com/p/1f1d3193d9e3 这个主题的内容之前分三个篇幅分享过&#xff0c;导致网络上传播的比较分散&#xff0c;所以本篇做了一个汇总&#xff0c;同时对部分内容及答案做了修改&#xff0c;欢迎朋友们吐槽、转发。因为篇幅长度和时间的原…

numpy维度交换_“lazy”的transpose()函数——从numpy 数组的内存布局讲起

1 数组的两种内存布局方式行优先与列优先首先我们回顾一下&#xff0c;矩阵数据在内存中的两种布局方式&#xff1a;行优先&#xff08;row-major&#xff09;&#xff1a;以行为优先单位&#xff0c;在内存中逐行存储/读取&#xff1b;对于多维&#xff0c;意味着当线性扫描内…