mui列表左滑菜单删除功能案例

最新推荐文章于 2024-05-06 16:13:57 发布
最新推荐文章于 2024-05-06 16:13:57 发布
阅读量7.5k 收藏 11
点赞数 2
分类专栏： mui 文章标签： 左滑菜单删除 mui侧滑删除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianzhang861/article/details/86481699
版权

项目中需要用到类似qq的菜单左滑删除功能

mui的app中可以看到此功能，但是官方文档中无法找到此组件

如果需要此页源码，需要下载mui demo的项目包

下载地址：

       github官方：https://github.com/dcloudio/mui

       csdn下载地址：https://download.csdn.net/download/lianzhang861/10916617

此页面的位置在 mui-master/examples/hello-mui/examples/tableviews-with-swipe.html 

下面展示此页面：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">滑动触发列表项菜单</h1>
		</header>
		<div class="mui-content">
			<h5 class="mui-content-padded" style="margin: 35px 10px 15px 10px;">拖拽(滑动)显示功能按钮，点击按钮触发事件</h5>
			<ul id="OA_task_1" class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						左滑显示删除按钮
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						右滑显示删除按钮
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						左右滑动均可显示删除按钮
					</div>
				</li>
			</ul>
			<h5 class="mui-content-padded" style="margin: 15px 10px;">拖拽(滑动)显示操作图标，释放后还原，自动触发事件</h5>
			<ul id="OA_task_2" class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-table">
						<div class="mui-table-cell">
							左滑自动触发删除
						</div>

					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						右滑自动触发删除
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						左右滑动均可自动触发删除
					</div>
				</li>
			</ul>
			<h5 class="mui-content-padded" style="margin: 15px 10px;">拖拽(滑动)显示多功能菜单</h5>
			<ul id="OA_task_2" class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a>
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
						<a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
					</div>
					<div class="mui-slider-handle">
						<div class="mui-table-cell">
							左滑显示多功能菜单
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
						<a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a>
					</div>
					<div class="mui-slider-handle">
						右滑显示多功能菜单
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left mui-disabled">
						<a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
						<a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a>
					</div>
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a>
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
						<a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
					</div>
					<div class="mui-slider-handle">
						左右滑动均可显示多功能菜单
					</div>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init();
			(function($) {
				//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
				//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
				//				setTimeout(function() {
				//					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
				//					setTimeout(function() {
				//						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
				//					}, 1000);
				//				}, 1000);
				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
				$('#OA_task_1').on('tap', '.mui-btn', function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
						if (e.index == 0) {
							li.parentNode.removeChild(li);
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
				});
				var btnArray = ['确认', '取消'];
				//第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑
				$('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
					var elem = this;
					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
						if (e.index == 0) {
							elem.parentNode.removeChild(elem);
						} else {
							setTimeout(function() {
								$.swipeoutClose(elem);
							}, 0);
						}
					});
				});
				//第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
				$('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
					var elem = this;
					mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
						if (e.index == 0) {
							elem.parentNode.removeChild(elem);
						} else {
							setTimeout(function() {
								$.swipeoutClose(elem);
							}, 0);
						}
					});
				});
			})(mui);
		</script>
	</body>

</html>

引入mui.css 和 mui.js 此页面就可以直接使用啦

豆趣编程
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
MUI实现左滑删除功能
浪子四方
08-28 1808
实现的效果 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>左滑删除</title> <meta name="viewport" content="width=device-width, initial-scale=1,...
mui左滑或右滑显示删除功能
浪子四方
08-15 2037
引言 提高用户体验的关键之一就是所有的操作都简单化，能够一目了然就最好不过了，所以作为开发者的我们得学会一些页面布局技巧，比如左滑或右滑展示更多功能，这种技巧既能简化页面布局又可以实现该有的功能，何乐而不为呢。 左滑删除 右滑删除 案例源码 <!doctype html> <html> <head> <meta ...
MUI左右滑动删除效果
06-01
左滑、右滑及左右滑动删除效果
mui实现左滑删除功能 htmL、js代码及踩坑
管它是人是狐还是萨摩耶的博客
02-19 1766
         因为之前排版为了方便都是用table，tr，td来做的（后台小Java开发，谅解谅解）          这玩意只能用ul、li 最方便 贴代码 html = "&lt;ul id='ul" + result + "' class='mui-table-view'&gt;                 &lt;li class='mui-table-view-cell'...
2024年前端最全mui框架实现分页功能（上拉加载，下拉刷新）以及点击事件的实现，成功收获美团小米offer
最新发布
2401_84617969的博客
05-06 317
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
MUI列表滑动操作
mypowerhere的专栏
08-15 5092
前言：通过MUI等目前流行的前端框架，我们可以生成接近原生APP体验的界面。列表滑动操作，使用了mui-table-view和mui-slider两个组件。1.界面部分：注：需要引入mui的样式和脚本外链&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=...
uniapp左滑删除
m0_60827885的博客
07-10 3172
在本页面引入组件并使用在需要左滑删除的地方使用。
mui左滑右滑删除
11-24
MUI左滑右滑关闭功能，主要是为了赚点积分换取其他的资源。
Vue+Mui实现列表侧滑删除功能.zip
04-16
在本文中，我们将深入探讨如何使用Vue.js框架与Material UI（Mui）库来实现一个具有列表侧滑删除功能的应用。Vue.js是一个轻量级、高性能的前端JavaScript框架，而Material UI则是基于Google的Material Design规范...
MUI列表条目点击事件代码
03-04
除此之外，MUI还提供了丰富的API和插件，如下拉刷新、上拉加载更多、侧滑菜单等，这些都可以与列表点击事件结合使用，以实现更复杂的交互效果。例如，你可能希望在点击某个列表项后，下拉刷新或上拉加载更多的数据。...
MUI 实现侧滑菜单及其主体部分上下滑动的方法
08-28
本文将详细介绍如何使用MUI实现侧滑菜单以及主体部分的上下滑动功能。 首先，我们要了解MUI侧滑菜单的基本结构。侧滑菜单通常用于移动端应用，提供一种隐藏的导航方式，用户可以通过从屏幕边缘向内滑动来显示或隐藏...
仿qq滑动删除
05-22
模仿qq的滑动删除效果的一个demo，想了解的可以下载看一下
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能组件。
01-26
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现！精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现！
仿QQ左滑出现删除功能，HTML
06-21
压缩包内一共有三个HTML文件，有实现仿QQ左滑出现删除按钮的三种实现方式，两种是使用原生JS，一种使用JQuery，基本满足大多数需求。
vue使用mui的左滑删除
加菲猫的鳄鱼的博客
05-26 693
vue-cli使用mui的左滑删除，效果如图。点击后显示删除弹框删除后自动隐藏红色块。 <template> <div class="mui-conent"> <div>mui的左滑删除</div> <div class="mui-table-view"> <div ...
mui常用
CrowBlock8192
09-03 372
            input::-webkit-input-placeholder,             textarea::-webkit-input-placeholder {                 color: #555;             }                          input::-moz-placeholder,            ...
30. Element parentNode 属性
enlyhua的专栏
08-06 1297
实例返回 <li> 元素的 parentNode（父节点）：document.getElementById("item1").parentNode;<!DOCTYPE html> <html> <body><p>列表示例：</p> <ul><li>Coffee</li><li>Tea</li></ul><p id="demo">点击按钮来获得列表中首个列表项的父节点节点名。</p><button o
使用MUI 实现模仿QQ向左滑动出现删除，编辑的代码
weixin_41905935的博客
06-28 4863
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;met
mui------列表项中如何实现自动左滑或者右滑
u010978381的博客
10-27 2936
mui------列表项中如何实现自动左滑或者右滑 网上有很多码友，包括dcloud社区也有人问过这个问题，怎样模拟左右滑动事件，因为有些时候，滑动列表框，不局限于手动滑动，最好是，举个例子，用户操作了哪项   之后，列表能够自己滑出来，这样很直观，体验上也很好。     有网友说,，mui.trigger 能帮我们实现，但是，请大家认真看下，文档上面说的很清楚，是帮我们  部分 实现...
限制mui左滑返回上一级
07-27
对于限制mui左滑返回上一级的问题，你可以尝试以下方法： 1. 使用`preventDefault`方法阻止默认的左滑返回行为。你可以在页面加载时或者需要限制左滑返回的页面上添加以下代码： ```javascript document.addEventListener('DOMContentLoaded', function() { document.addEventListener('touchmove', function(e) { if (e.touches.length > 1) { return; } var touch = e.touches[0]; var x = touch.clientX; var y = touch.clientY; if (x < 10) { e.preventDefault(); } }, { passive: false }); }); ``` 这段代码会监听`touchmove`事件，并且在触摸开始时判断触摸点的横坐标是否小于10（可根据实际情况调整）。如果小于10，就调用`e.preventDefault()`方法阻止默认的左滑返回行为。 2. 使用`mui.init`方法的`swipeBack`参数禁用左滑返回。你可以在页面加载时或者需要限制左滑返回的页面上添加以下代码： ```javascript mui.init({ swipeBack: false }); ``` 这段代码会禁用mui框架的左滑返回功能。 通过以上两种方法，你可以限制mui左滑返回上一级的行为。请注意，这只是一种常见的解决方案，具体实现可能会因项目需求而有所变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆趣编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值