vue滑动删除组件

来源：互联网发布：轩辕传奇神器数据图编辑：程序博客网时间：2024/06/05 16:14

说明：该组件基于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.transformStartX = this.transformX;},touchMove(e){e.preventDefault();var x = e.targetTouches[0].screenX;var temp = (x - this.startPos.x)/75;if(temp > this.sliderConf.distance || (this.transformX == 0 && temp > 0) ){this.transformX = 0;}else{this.transformX =this.transformStartX + temp;}},touchEnd(e){e.preventDefault();if(this.transformX > 0){this.transformX = 0;}if(this.transformX < 0){this.transformX = -this.sliderConf.distance;}}}})</script><style>.slider_delete{position: absolute;left: 0;z-index: 100;}</style>

使用

<template><div class="delete_div"><slider_delete :sliderConf="sliderConf"><div class="content"></div></slider_delete><div class="delete_button"></div></div></template><script>import SliderDelete from "components/slider_delete.vue";export default({data(){return {sliderConf:{//滑动配置distance:1.4,}}},components:{"slider_delete":SliderDelete,}})</script><style>.content{background-color: black;width: 10rem;height: 3rem;}.delete_button{position: absolute;background-color: red;right: 0;width: 1.4rem;height: 3rem;}.delete_div{position: relative;}</style>

0 0