【微信小程序】高仿微信的左滑删除效果

古城微笑少年丶 2022-01-10 07:41 350阅读 0赞

## 前言 ##

在小程序中，实现类似微信左滑删除的效果，有些人可能会想到在view里用到touchstart，touchmove，touchend结合实现的。但这个有缺点，特别是在ios真机上，左滑时页面会上下滑动，用户体验emmm...或许需要增加disableScroll:true，但这个页面会被禁止滚动，或许里面再嵌scroll-view就可以实现的。但我要说的不是这个方案，小程序出了更佳的一个组件，就是movable-view，很好用，提供动画的过渡，提供滑动触发的x轴，可以用这个x轴作为判断的，比较方便～

## xml ##

<template>
    	<block wx:for="{ {dataList}}" wx:key="index">
    		<movable-area class="area">
    		    <movable-view class="item"
    		        damping="100" 
    		        direction="horizontal" 
    		        x="{ {item.swipeX}}" 
    		        data-index="{ {index}}" 
    		        @change="swipeChange({ {index}})" 
    		        out-of-bounds="true" 
    		        animation="true" 
    		        @touchend="swipeEnd({ {index}})" 
    		        @touchstart="swipeStart({ {index}})"
    		    >
    		        <view class="item-left">{
        {item.name}}</view>
    		        <view class="item-right" @tap.stop="delete({ {index}})">删除</view>
    		    </movable-view>
    		    <view class="line"></view>
    		</movable-area>	
    	</block>
    </template>
    复制代码

>  *  Tip:movable,movaview必须设置宽和高的值，否则默认值（10px)
>  *  Tip: movable必须要比movaview大点的，只是要容下内容和删除的容器的宽度

## js ##

<script>
    import wepy from 'wepy';
    
    export default class swipeLeft extends wepy.page{
    	config={
    		navigationBarTitleText:'左滑删除',
    	}
    
    	data={
    		dataList:[
    			{name:'无可奈何花落去'},
    			{name:'庄生晓梦迷蝴蝶'},
    			{name:'天涯何处无芳草'},
    			{name:'此情可待成追忆'},
    			{name:'人面不知何处'},
    			{name:'心悦君兮君不知'}
    		],
    		currentX:0,
    		currentIndex:-1,
    	}
    
    	setShowDel(index,moveX){
    		this.dataList[index].swipeX=moveX;
    	}
    
    	methods={
    
    		//滑动开始的触发事件
    		swipeStart(index){
    			this.currentIndex=index;
    			this.dataList.forEach((item,i)=>{
    				if(index!=i){
    					item.swipeX=0;
    				}
    			})
    		},
    
    		//滑动结束的触发事件
    		swipeEnd(index){
    			let swipeX=this.dataList[index].swipeX;
    			if(this.currentX<-10 && (swipeX===0 || !swipeX)){
    				this.setShowDel(index,-120);
    				return;
    			}
    
    			if(this.currentX>-55 && swipeX===-120){
    				this.setShowDel(index,0);
    				return;
    			}
    		},
    
    
    		//监听滑动过程触发的事件
    		swipeChange(...e){
    			if(this.currentIndex===e[0]){
    				this.currentX=e[1].detail.x;
    			}
    		}
    	}
    
    }
    </script>
    复制代码

## wxss ##

<style lang="less">
    
    .area{
    	width: 750rpx;
    	position: relative;
    	height: 150rpx;
    	.line{
    		position: absolute;
    		width: 690rpx;
    		height: 1px;
    		background: #ededed;
    		bottom: 0;
    		left: 50%;
    		transform: translateX(-50%);
    		z-index: -1;
    	}
    	.item{
    		width: 900rpx;
    		height: 150rpx;
    		display: flex;
    		align-items: center;
    		.item-left{
    			width: 750rpx;
    			margin-left: 30rpx;
    		}
    		.item-right{
    			width: 140rpx;
    			height: 150rpx;
    			background: #ED6F20;
    			color: #fff;
    			line-height: 150rpx;
    			text-align: center;
    			border-radius: 0 10rpx 10rpx 0;
    		}
    	}
    }
    </style>
    复制代码

转载于:https://juejin.im/post/5cfe0b26e51d45108f2541e1

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序左滑删除效果的实现

<view class="box"> <view class="item { {status ? '' :'active'}}"> <view c

心已赠人/ 2022年11月14日 14:52/ 0 赞/ 217 阅读

相关微信小程序左滑删除效果的实现

转载自：http://www.jianshu.com/p/07c4ddf8a3d3 今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，

清疚/ 2022年07月10日 04:29/ 0 赞/ 232 阅读

相关微信小程序购物车左移删除

需求：在原本购物车的编辑选中删除的基础上，增加左移删除。查看Api文档和搜索了解到：bindtouchstart="touchS" bindtouchm

傷城~/ 2022年06月02日 04:19/ 0 赞/ 266 阅读

相关微信小程序仿微信语音

搞了这么长时间，第一次写文章。给大家分享个技术难度不高的，主要展示录音功能。先看一下效果![70][]![70 1][] ![70 2][] 就是这样，

水深无声/ 2022年05月21日 08:05/ 0 赞/ 435 阅读

相关高仿微信对话列表滑动删除效果

转载请注明出处：http://blog.csdn.net/singwhatiwanna/article/details/17515543 前言用过微信的都知道，微信对

柔光的暖阳◎/ 2022年05月13日 00:34/ 0 赞/ 202 阅读

相关微信小程序独家秘笈之左滑删除

> 代码地址如下： > [http://www.demodashi.com/demo/14056.html][http_www.demodashi.com_demo_140

水深无声/ 2022年05月10日 00:48/ 0 赞/ 217 阅读

相关微信小程序左滑删除效果的实现

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

柔光的暖阳◎/ 2022年04月24日 06:36/ 0 赞/ 321 阅读

相关微信小程序左滑删除效果的实现

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

你的名字/ 2022年04月02日 04:24/ 0 赞/ 358 阅读

相关【微信小程序】高仿微信的左滑删除效果

前言在小程序中，实现类似微信左滑删除的效果，有些人可能会想到在view里用到touchstart，touchmove，touchend结合实现的。但这个有缺点，特别是在

古城微笑少年丶/ 2022年01月10日 07:41/ 0 赞/ 351 阅读

相关微信小程序实现列表项左滑删除效果

效果 ![20200912112125963.gif][]![20200912115653928.jpg][] 图片 ![20200912112447621.pn

╰+哭是因爲堅強的太久メ/ 2021年09月02日 08:45/ 0 赞/ 418 阅读