效果图

页面模板代码

<div><move-left v-if="list.length>0" :list="list" :del_width="60" @del="del"><template v-slot:line="scope"><div class="row">{{scope.item.name}}</div></template><template v-slot:del><div class="del">删除</div></template></move-left></div>

说明

del_width属性为‘删除按钮’的宽度，
list为数据列表
del为删除的事件
你可以在插槽中定义你自己的行内容样式以及删除按钮的样式

页面JS代码

<script>import moveLeft from '../components/moveLeft'export default {name: 'index',data () {return {list:[],}},components:{moveLeft},mounted () {this.loadList()},methods: {loadList(){this.list=[{name:'土豆'},{name:'玉米'},{name:'花生'},{name:'菠菜'},]},del(item){this.$dialog.confirm({title: '提示',message:'是否删除'+item.name+'?',}).then(() => {this.loadList()}).catch(() => {this.loadList()});},},}
</script>

页面css代码

<style scoped>
.row{width: 100%;height: 60px;background-color: black;color: white;text-align: center;line-height: 60px;
}.del{width: 60px;height:56px;line-height: 60px;background-color: red;color: white;}
</style>

最后附上组件代码

<template><div><template v-for="(item,index) in list"><div@click.stop="deleteCard(item,index)"@touchstart="touchstart($event,index)"@touchmove="touchmove($event,index)"@touchend="touchend($event,index)"class="v relative "style="overflow: hidden;"><div class="v relative z-index10" :style="{transform: 'translateX('+item.move+'px)'}"><slot :item="item" name="line"></slot></div><div class="del"><slot name="del"></slot></div></div></template></div>
</template><script>export default {name: 'moveLeft',props:{list:{type:Array,default:[]},del_width:{type:Number,default: 0}},data(){return{moveIndex:0,move:0,startX:0,endX:0,moveX:0,disX:0,}},methods:{touchstart(e,index){e = e || eventif(e.touches.length == 1){this.moveIndex=indexthis.startX=e.touches[0].clientX}},touchmove(e,index){if(this.moveIndex!=index){return}e = e || eventlet width=this.del_widthif(e.touches.length == 1){this.moveX=e.touches[0].clientXthis.disX=this.startX-this.moveXif(this.disX<=0){this.list[index].move=0}else if(this.disX>0){this.list[index].move=this.disX*(-1)this.list[index].show=trueif(Math.abs(this.list[index].move)>width){this.list[index].move=width*(-1)this.list[index].show=truefor(let i=0;i<this.list.length;i++){if(i!=this.moveIndex){this.list[i].move=0this.list[i].show=false}}}}this.$forceUpdate()}},touchend(e,index){if(this.moveIndex!=index){return}e = e || eventlet width=this.del_widthif(e.changedTouches.length == 1){this.endX=e.changedTouches[0].clientXthis.disX=this.startX-this.endXif(this.disX<(width/2)){this.list[index].move=0}else{this.list[index].move=width*(-1)this.list[index].show=truefor(let i=0;i<this.list.length;i++){if(i!=this.moveIndex){this.list[i].move=0this.list[i].show=false}}}this.$forceUpdate()}},deleteCard(item,index){if(item.show){this.$emit('del',item)}},},mounted () {if(this.list.length>0){this.list.forEach(item=>{item.move=0;item.show=false})}}}
</script><style scoped>
.v{width: 100%;float: left;
}.relative{position: relative;}.z-index10{z-index:20;}
.del{position: absolute;z-index: 10;right:0;min-width: 60px;height:100%;
}
</style>

第一次发表文章，有疑问或者更好的建议请留言哦~

一看就懂的vue移动端实现左滑删除功能相关推荐

html消息页左滑删除模板,基于JS实现移动端左滑删除功能
基于JS实现移动端左滑删除功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现移动端左滑删除功能,编程之家小编觉得挺不错的,现 ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
Vue移动端----页面旋转进入特效功能实现
[Vue移动端]页面进入特效实现–翻转白云悠悠苍狗悠悠茶水一杯温润入喉本来今日正在浏览csdn 学习学习Koa 秃然微信 " ding" 嚯?什么情况?先瞅瞅 CSS?这 ...
一看就懂的vue简版源码概述
本文不会拆步骤对源码进行实现,只介绍vue原理及相关核心实现思想.在之前的四篇文章中已对vue进行响应实现.需要可阅读相关文章: Vue源码探索之知识小储备 --Object.defineProper ...
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）
搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据将请求得到的结果绑定到模板中 2. 基本功能一.将父组件中搜索框输入的内容传给联想建议子组件二.在子组件中监视搜索框 ...
vue -- 移动端(vant)更换头像剪切功能
效果: 思路: 利用 file input 特性,获取到选中的图片. 借助 vue-cropper 实现头像剪裁功能,然后把剪裁的头像上传至服务器,完成更换头像操作代码: myDetails.vue ...
html5滑动删除置顶,js实现移动端向左滑动删除效果
使用插件alloy_finger.js (vue方法使用) 1.引用js 2.html方法的使用 3.js方法的使用 Vue.use(AlloyFingerVue); var vm=new Vue({ ...
vue ---- 实现手机端（左滑删除。右划正常）
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系 ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...

一看就懂的vue移动端实现左滑删除功能

效果图

页面模板代码

说明

页面JS代码

页面css代码

最后附上组件代码

第一次发表文章，有疑问或者更好的建议请留言哦~

一看就懂的vue移动端实现左滑删除功能相关推荐

最新文章

热门文章