vue滑动删除组件

最新推荐文章于 2024-07-29 11:08:22 发布

alvyang

最新推荐文章于 2024-07-29 11:08:22 发布

阅读量5.7k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Alvyang/article/details/69230209

版权

本文介绍了一个基于jQuery和flexible.js的Vue移动端滑动删除组件，适用于750px设计稿。提供了git源码地址，便于开发者使用。

摘要由CSDN通过智能技术生成

说明：该组件基于jquery和flexible.js（设计稿宽为750px）

vue移动端滑动删除组件

git地址

<template>
	<div class="slider_delete" :style="{webkitTransform:'translate3d('+transformX+'rem,0,0)'}" 
		@touchstart.stop="touchStart($event)" 
		@touchend.stop="touchEnd($event)"
		@touchmove.stop="touchMove($event)">
		<slot></slot>
	</div>
</template>
<script>
	/* 
	 * 滑动配置。distance 滑动距离
	 */
	export default({
		data(){
			return {
				startPos:{x:0,y:0},
				endPos:{x:0,y:0},
				transformX:0,
				transformStartX:0,
				
			}
		},
		props:['sliderConf'],
		methods:{
			touchStart(e){
				e.preventDefault();
				this.startPos.x = e.targetTouches[0].screenX;
				this