html消息页左滑删除模板,基于JS实现移动端左滑删除功能
基于JS实现移动端左滑删除功能
2019-01-07
编程之家
https://www.jb51.cc
编程之家收集整理的这篇文章主要介绍了基于JS实现移动端左滑删除功能,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
废话不多说了,直接给大家贴代码了,具体代码如下所示:
@(item.DiseaseInformation.BrowseNum)
nofollow" οnclick="del('@item.UID')" class="btn btn-red pay-order-btn pay-order-del" style="height:90px;line-height:90px;width:105px;font-size:18px">删除
}
jquery.productswipe.js代码
删除
* author:yaohuitao@100tal.com
* ******************/
function prevent_default(e) {
e.preventDefault();
}
function disable_scroll() {
$(document).on('touchmove',prevent_default);
}
function enable_scroll() {
$(document).off('touchmove',prevent_default);
}
var mytouch = function (obj) {
//滑动删除
var Drags = {};
Drags.dragtag = false;//拖动状态
Drags.dragstart = true;//拖动开始标志
Drags.datatransx = 0;
$(obj)
.on('touchstart mousedown',function (e) {
if (!($(e.target).hasClass("pay-order-swiper") || $(e.target).parents().hasClass("pay-order-swiper"))) {
closeallswipe(); //点击还原
if (e.originalEvent.targetTouches) {
Drags.dragx = e.originalEvent.targetTouches[0].pageX;
Drags.dragy = e.originalEvent.targetTouches[0].pageY;
} else {
Drags.dragx = e.pageX;
Drags.dragy = e.pageY;
}
if ($(e.currentTarget).attr("data-transX")) {
Drags.datatransx = parseInt($(e.currentTarget).attr("data-transX"));
}
Drags.dragtag = true;
Drags.dragstart = true;
}
})
.on('touchmove mousemove',function (e) {
if (Drags.dragtag) {
$(e.currentTarget).removeClass('animatedh');
$(e.currentTarget).addClass('dragstart'); //添加禁止选择
var change = 0;
if (e.originalEvent.targetTouches) {
change = e.originalEvent.targetTouches[0].pageX - Drags.dragx;
changey = e.originalEvent.targetTouches[0].pageY - Drags.dragy;
} else {
change = e.pageX - Drags.dragx;
changey = e.pageY - Drags.dragy;
}
if (Drags.dragstart) {
if (Math.abs(changey) < 20) {
showswiperfbn();
}
} else {
showswiperfbn();
}
function showswiperfbn() {
if (Math.abs(change) > 20) {
Drags.dragstart = false;
if (change < -20) {
change = change + Drags.datatransx + 20;
} else {
change = change + Drags.datatransx - 20;
}
change = Math.min(Math.max(-300,change),0);
$(e.currentTarget).css('transform','translate3D(' + change + 'px,0px,0px)');
$(e.currentTarget).attr("data-transX",change);
disable_scroll();
}
}
}
})
.on('touchend mouseup',function (e) {
var left = parseInt($(e.currentTarget).attr("data-transX"));
var new_left;
if ($(e.currentTarget).hasClass("open")) {
if (left > -110) {
new_left = 0;
$(e.currentTarget).removeClass('open');
} else {
new_left = -120;
}
} else {
if (left < -20) {
new_left = -120;
$(e.currentTarget).addClass('open');
} else {
new_left = 0;
}
}
$(e.currentTarget).removeClass('dragstart');
$(e.currentTarget).css('transform','translate3D(' + new_left + 'px,0px)');
$(e.currentTarget).attr("data-transX",new_left);
$(e.currentTarget).addClass('animatedh');
Drags.dragtag = false;
enable_scroll()
});
}
function closeallswipe() {
$('.pay-list .pay-each').css('transform','translate3D(0px,0px)');
$('.pay-list .pay-each').removeClass('open');
$('.pay-list .pay-each').addClass('animatedh');
$('.pay-list .pay-each').attr("data-transX",0);
}
页面使用 执行mytouch($('.pay-list .pay-each'));
总结
以上所述是小编给大家介绍的基于JS实现移动端左滑删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
总结
以上是编程之家为你收集整理的基于JS实现移动端左滑删除功能全部内容,希望文章能够帮你解决基于JS实现移动端左滑删除功能所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
html消息页左滑删除模板,基于JS实现移动端左滑删除功能相关推荐
- java web删除文件_Web开发为了java端程序能删除文件的解决办法
Web开发为了java端程序能删除文件,必须在.../jre/lib/security/java.policy文件中添加以下两个中的任何一段代码进去. 注:必须是服务器的本地文件,局域网内的其他机器文 ...
- html5滑动删除置顶,js实现移动端向左滑动删除效果
使用插件alloy_finger.js (vue方法使用) 1.引用js 2.html方法的使用 3.js方法的使用 Vue.use(AlloyFingerVue); var vm=new Vue({ ...
- 空气质量html模板,基于HTML5+CSS3移动端空气质量APP的设计与实现
摘要: 本文设计的空气质量APP是在Android系统上运行的.在"智慧城市"和"互联网+"的背景下,人们更加关注"健康"这个话题,日常出行 ...
- html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
- 简洁消息通知单页html源码模板
这是一款 HTML开发的简洁消息通知html源码模板,简单修改即可使用! 源码下载: https://download.csdn.net/download/www_58soho/86804334
- ecshop 后台添加评论_技术小白如何添加服务号模板消息?服务号的模板消息功能到底该怎么使用?...
服务号和订阅号之间最大的区别就在于,服务号拥有一些订阅号没有的高级接口功能,例如模板消息就是其中之一. 模板消息在发送时需要调用技术接口才能发送,每发送1条模板消息就会产生1条回调信息,发送给1万人, ...
- web网页制作期末大作业——蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客
HTML5+CSS大作业--蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...
- 力扣刷题笔记:1438. 绝对差不超过限制的最长连续子数组(滑窗模板题,选择有序列表SortedList()数据类型就不会超时)
题目: 1438.绝对差不超过限制的最长连续子数组 给你一个整数数组 nums ,和一个表示限制的整数 limit,请你返回最长连续子数组的长度,该子数组中的任意两个元素之间的绝对差必须小于或者等于 ...
- 基于门限环签名的可删除区块链(未完)
基于门限环签名的可删除区块链 [1]任艳丽,徐丹婷,张新鹏,谷大武.基于门限环签名的可删除区块链[J].通信学报,2019,40(04):71-82. 摘要:随着区块链的发展,存储所有区块数据需要巨大 ...
最新文章
- 泊松图像融合(泊松融合)
- 类文件结构-method-init和类文件结构-method-main
- [MySQL优化案例]系列 -- DISABLE/ENABLE KEYS的作用
- jquery 筛选不到 checkbox, radio 表单元素
- 《我也能做CTO之程序员职业规划》之二:做CTO的苹果定律
- 数据结构C++版-栈
- Servlet中将JavaBean对象传递到JSP页
- ActiveX图片控件,图片处理基于Internet的程序
- King Arthur's Knights 【HDU - 4337】【哈密顿回路性质Dirac定理】
- 批量创建钱包地址并保存私钥
- 个人技术总结——Unity中角色动画制作及动画切换逻辑的实现
- 测试属性4 –准确性
- 人工智能与数据挖掘的关系
- 机器学习——验证方法
- MySQL数据库灵魂拷问
- 微信小程序 一键授权 给第三方平台代开发管理(二,一键授权给第三方平台)
- data:image图片转png与jpg,png转data:image格式。
- 为什么成立计算机维修社团,张家口煤矿机械制造高级技工学校学生计算机维修社团成立...
- 计算机图形学-抛物线的中点Bresenham算法
- 对接阿里云sms短信服务发送验证码