原声js 模拟微信滑动

最新推荐文章于 2019-10-21 11:15:44 发布
最新推荐文章于 2019-10-21 11:15:44 发布
阅读量477 收藏 1
点赞数
分类专栏： 前端_js_案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011301203/article/details/72871428
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>微信滑动删除</title>
		<!--<link rel="stylesheet" type="text/css" href="base.css"/>-->
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			html {
			  font-size: 20px;
			}
			body {
			  font-size: 16px;
			}
			@media only screen and (max-width: 320px) {    html { 
			        font-size: 42.7px !important; 
			    }} 
			@media only screen and (min-width: 321px) and (max-width: 360px) {    html { 
			        font-size: 48px !important; 
			    }} 
			@media only screen and (min-width: 361px) and (max-width: 375px) {    html { 
			        font-size: 50px !important; 
			    }} 
			@media only screen and (min-width: 376px) and (max-width: 384px) {    html { 
			        font-size: 52.1px !important; 
			    }} 
			 
			@media only screen and (min-width: 385px) and (max-width: 414px) {    html { 
			        font-size: 55.2px !important; 
			    }} 
			 
			@media only screen and (min-width: 415px) and (max-width: 480px) {    html { 
			        font-size: 64px !important; 
			    }} 
			 
			@media only screen and (min-width: 481px) and (max-width: 540px) {    html { 
			        font-size: 72px !important; 
			    }}
			@media only screen and (min-width: 750px) {    html { 
			        font-size: 100px !important; 
			    }}
			
			
			.line{
				width: 7.5rem;
				height: 1.35rem;
			}
			.line_move{
				width: 7.5rem;
				height: 100%;
				font-size: 0.28rem;
				padding-left: 0.3rem;
				padding-right: 0.3rem;
				border-bottom: 1px solid #E0E0E0;
				background-color: white;
				box-sizing: border-box;
				float: left;
				position: relative;
				z-index: 2;
			}
			.reimbu_top{
				padding-top: 0.2rem;
			}
			.reimbu_top>span:nth-child(2){
				float: right;
				color: #FFAA00;
			}
			
			.reimbu_bottom{
				margin-top: 0.2rem;
				margin-bottom: 0.2rem;
			}
			.reimbu_bottom>span:nth-child(2){
				float: right;
			}
			.line_right{
				position: relative;
				left: 4.3rem;
				height: 1.32rem;
				width: 3.2rem;
				
			}
			.line_right div{
				width: 1.6rem;
				height: 1.32rem;
				line-height: 1.32rem;
				text-align: center;
				font-size: 0.26rem;
				box-sizing: border-box;
			}
			.line_right>div:nth-child(1){
				background-color: #C2C2C2;
				position: absolute;
				top: 0;
				right: 1.6rem;
			}
			.line_right>div:nth-child(2){
				background-color: #D0011B;
				position: absolute;
				top: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		
		<div class="box-1">
			<div class="box_count">
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				<div class="line">
					<div class="line_move" index="1">
						<div class="reimbu_top">
							<span>拜访客户</span>
							<span>986.00元</span>
						</div>
						<div class="reimbu_bottom">
							<span>2017-04-05</span>
							<span>未打印</span>
						</div>
					</div>
					<div class="line_right">
						<div>编辑</div>
						<div οnclick="test(1)">删除</div>
					</div>
				</div>
				
				
			</div>
		</div>
		
		<script>
			
			var moveArr = document.getElementsByClassName('line_move');
			var startX=0;
			var moveX=0;
			var moveStatus=0; //0:未滑出 1：以划出
			var arr = [];     //判断手指触摸数量
			function handler() { return false;}
			for( var i=0; i<moveArr.length; i++ ){
				
				moveArr[i].addEventListener('touchstart',function(event){  
					startX = event.touches[0].clientX;  
					arr.push(this.getAttribute('index'));
					//arr.push(1); 不需要索引值就用这个
					//添加阻止默认行为
					this.addEventListener('touchmove', handler, false); 
	            })  
	            
				moveArr[i].addEventListener('touchmove',function(event){
					moveX = event.touches[0].clientX - startX; 
					moveXTO = moveX*0.01;
					// 向左滑动
					if( moveXTO > -1 && moveStatus==0 && arr.length==1){
						this.style.transform = "translate("+moveXTO+"rem)"; 
					}
					//向右滑动
					if( moveXTO > 1 && moveStatus==1){
						this.style.transform = "translate("+(-3.2+moveXTO)+"rem)"; 
					}
				})
				moveArr[i].addEventListener('touchend',function(event){
					moveEnd = moveX*0.01;
					//向左滑动
					if( moveEnd < 0 && moveStatus==0){ 
                    	if( Math.abs(moveEnd) > 1 ){
                    		this.style.transform = "translate("+-3.2+"rem)";  
                    		moveStatus=1;
	                    }else{
	                    	this.style.transform = "translate("+0+"rem)";  
	                    	moveStatus=0;
	                    }
	                }else if(moveEnd < 0 && moveStatus==1){
							moveArr[this.getAttribute('index')].style.transform = "translate("+0+"rem)";  
                    		moveStatus=0;
	                // 向右滑动    
					}else if(moveEnd>0 && moveEnd > 1){ 
                    	this.style.transform = "translate("+0+"rem)";  
                    	moveStatus=0;
					}
					this.style.transitionDuration ="0.5s";
					moveX=0;
					// 解绑事件
					this.removeEventListener('touchmove', handler, false);
			  	})
			}
			for( var i=0; i<moveArr.length; i++ ){
				moveArr[i].addEventListener("touchstart", function(e){  
					arr = [];
					moveStatus=0;
			        for(var j=0; j<moveArr.length; j++){
	            		moveArr[j].style.transform = "translate("+0+"rem)";  
	            	}
			    }); 
			}
			
		</script>
	</body>
</html>

心郎
关注
专栏目录
微信小程序 界面从右边滑出_微信小程序左右滑动切换页面详解及实例代码
weixin_33342041的博客
01-14 1870
这篇文章主要介绍了微信小程序左右滑动切换页面详解及实例代码的相关资料,需要的朋友可以参考下微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。touchstart在触摸开始时触发事件;touchend在触摸结束时触发事件;touchmove触摸的过...
完整微信小程序原声支付
yjdyyds的博客
12-29 503
<view class="flexw"> <view class="geti" wx:for="{{listp}}" data-id="{{item.id}}" style="color: {{item.id==eid?'#fff':'#7CAAFF'}}; background: {{item.id==eid?'#7CAAFF':'#FFF'}};" bindtap="btns" data-czmoney="{{item.man}}"> <view cla.
仿微信向左滑动删除效果
04-23
这是一个简单的仿照微信的向左滑动显示删除效果。存原生js，无需引用其他插件
仿QQ微信手机端触屏滑动效果
08-30
模仿QQ微信手机端触屏滑动效果（已读，删除，取消关注） 模仿QQ微信手机端触屏滑动效果（已读，删除，取消关注）
jquery仿微信聊天对话窗口滚动样式
11-13
jquery仿微信聊天对话窗口滚动样式
js touch触屏原理分析
weixin_30247159的博客
06-15 56
之前我们做过许多触屏的特效，那么，今天，我们来分析下js的触屏原理。事实上，大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一：对于Touch的处理”，我想这文章许多初学js touch的人都看过。 我们今天以实例来说明吧。在实现触屏中，我们必须采用js的addEventListener，接着加上 touchstart,touchmove,...
JS模拟自动点击的简单实例
10-27
介绍了JS模拟自动点击的简单实例，有需要的朋友可以参考一下
触屏Tap模拟事件
weixin_34356138的博客
06-07 241
触屏的click因为有双击判断所以有200ms的延迟，zepto里的touch.js兼容不好所以tap也没法直接用。 gibhub上有个fastclick太大了。 自己用touched写个简单的模拟tap事件，并在内部加上e.preventDefault();阻止系统默认行为。 /* 模拟Tab事件 @obj：元素 @callback：回调函数 */ func...
js -- 设置滚动条随着输入内容滚动（在模拟微信表情输入的时候遇到的）
bobobocai的博客
08-17 2339
项目中需要自己制作一个类似微信表情包输入的效果，在输入表情的时候滚动条只会随着输入的文字滚动，却不会随着输入的自定义表情滚动   // 滚动条跟着输入内容滚动 function add() { var now = new Date(); var div = document.querySelector('article'); div.scrollTop = div....
原声微信小程序封装axios(小白教程)
最新发布
09-07
原声微信小程序封装axios(小白教程)
ubuntu版本微信，原声版本不是deepin wine版本
08-19
ubuntu版本微信原生的
跟随手势滑动轮播图组件(原声js)
08-31
在本文中，我们将深入探讨如何使用纯原生JavaScript开发跟随手势滑动的轮播图组件。这个组件的设计理念是不依赖任何第三方库，如jQuery，而是借鉴jQuery插件的封装方式，提供高度自定义的选项，包括设置轮播时间、...
高仿微信实现左滑显示删除按钮功能
孤云博客
06-30 4243
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) 在实际项目中删除列表中的某一项是非常常见的功能，传统的做法可以使用长按监听器等，而现在流行的做法是左滑弹出删除按钮，微信，QQ等都是这么做的，下面做一个示例，代码如下： 主页面MainActivity：代码比较简...
微信小程序仿支付宝年账单页面滑动的效果展示
@Grapefruit的博客
10-21 3910
要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 近来要做一个年账单页面，类似于支付宝年账单，就是对一年下单的总结，但是支付宝页面滑动的效果在小程序上是有些bug的，柚子也是研究了很久了，但自认还算完美吧，下面把过程说一下，希望能对某些朋友有所帮助： 1、首先要有页面滑动动画的效果，就必须要监听页面的滚动，监听你手指是向上...
js案例 移动端左右滑动touch+transform
热门推荐
11-29 1万+
*{ padding: 0; margin: 0; /*margin-top:100px;*/ } #move{ height: 80px; width: 99%; border: 1px solid red; font-size: 19px; text-align: center; padding-top: 20
jq + qrcode 生成二维码（解决中文乱码）
06-05 1万+
生成二维码 var str= "阿斯达四大四大1|9131000030150590X2|中国（上海）自阿斯达四大四大号302部位368室|021-58388909|中信银行股份有限公司上海长宁支行|7312410182600061061"; // function utf16to8(str) { var out, i,
js案例 元素的拖拽与吸附(touch+translate)
11-29 6953
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale...
js 登陆ajax请求
04-01 3387
#login{ margin: 150px auto; list-style: none; border-radius: 30px; } #login{ width: 500px; height: 300px; border: 1px solid cornflowerblue; } #userName{ positio
微信原声小程序的轮播图如何实现自动播放
07-16
要实现微信原生小程序的轮播图自动播放，你可以使用 `swiper` 组件，并结合 `autoplay` 属性和 `interval` 属性来实现。 首先，在小程序的页面中引入 `swiper` 组件，并设置 `indicator-dots` 属性为 `true`，这样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值