微客导航 » 文章资讯 » vue swipeCell滑动单元格(仿微信)的实现示例

vue swipeCell滑动单元格(仿微信)的实现示例

2023-07-16 18:25:03 300

抽离Vantweapp滑动单元格代码改造而成

带有拉动弹性回弹效果

demo展示：https://littaotao.github.io/me/index（切换为浏览器调试的手机模式并且再次刷新一次）




.cell_container{
	position:relative;
	overflow:hidden;
	line-height:68px;
	height:68px;
	div{
		height:100%;
		.cell_content{
			height:100%;
			width:100%;
			text-align:center;
		}
		.cell_content_active{
			height:100%;
			width:100%;
			text-align:center;
			&:active{
				background:#e8e8e8;
			}
		}
		.cell_left,.cell_right{
			position:absolute;
			top:0;
			height:100%;
			display:flex;
			color:#fff;
			.divPostion{
				position:absolute;
			}
			div{
				white-space:nowrap;
				display:flex;
				align-items:center;
				background:#ccc;
			}
		}
		.cell_left{
			left:0;
			transform:translateX(-100%);
		}
		.cell_right{
			right:0;
			transform:translateX(100%);
		}
	}
}

touch.js

importVuefrom'vue';
exportconstisServer=false;
constMIN_DISTANCE=10;
constTouchMixinData={
startX:Number,
startY:Number,
deltaX:Number,
deltaY:Number,
offsetX:Number,
offsetY:Number,
direction:String
};

functiongetDirection(x,y){
if(x>y&&x>MIN_DISTANCE){
return'horizontal';
}

if(y>x&&y>MIN_DISTANCE){
return'vertical';
}

return'';
}


exportletsupportsPassive=false;

exportfunctionon(
target,
event,
handler,
passive=false
){
if(!isServer){
target.addEventListener(
event,
handler,
supportsPassive?{capture:false,passive}:false
);
}
}

exportconstTouchMixin=Vue.extend({
data(){TouchMixinData
return{direction:''};
},

methods:{
touchStart(){
this.resetTouchStatus();
this.startX=event.touches[0].clientX;
this.startY=event.touches[0].clientY;
},

touchMove(){
consttouch=event.touches[0];
this.deltaX=touch.clientX-this.startX;
this.deltaY=touch.clientY-this.startY;
this.offsetX=Math.abs(this.deltaX);
this.offsetY=Math.abs(this.deltaY);
this.direction=
this.direction||getDirection(this.offsetX,this.offsetY);
},

resetTouchStatus(){
this.direction='';
this.deltaX=0;
this.deltaY=0;
this.offsetX=0;
this.offsetY=0;
},

//avoidVue2.6eventbubbleissuesbymanuallybindingevents
//https://github.com/youzan/vant/issues/3015
bindTouchEvent(el){
const{onTouchStart,onTouchMove,onTouchEnd}=this;

on(el,'touchstart',onTouchStart);
on(el,'touchmove',onTouchMove);

if(onTouchEnd){
on(el,'touchend',onTouchEnd);
on(el,'touchcancel',onTouchEnd);
}
},
},
});

引入即可！！！

到此这篇关于vueswipeCell滑动单元格(仿微信)的实现示例的文章就介绍到这了,更多相关vueswipeCell滑动单元格内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue swipeCell滑动单元格(仿微信)的实现示例

热门推荐

随机推荐