mui左滑或右滑显示删除功能

最新推荐文章于 2024-03-25 16:34:19 发布

原创最新推荐文章于 2024-03-25 16:34:19 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

MUI 同时被 2 个专栏收录

19 篇文章

订阅专栏

移动开发

2 篇文章

订阅专栏

本文探讨如何利用Mui提升用户体验，通过左滑或右滑操作在界面上显示删除功能，以此达到简化页面布局并增强交互性的目的。文中包含左滑删除和右滑删除的实现，并提供相关案例源码。

引言

提高用户体验的关键之一就是所有的操作都简单化，能够一目了然就最好不过了，所以作为开发者的我们得学会一些页面布局技巧，比如左滑或右滑展示更多功能，这种技巧既能简化页面布局又可以实现该有的功能，何乐而不为呢。

左滑删除

右滑删除

案例源码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>
	<body>
		<ul 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>
		</ul>
	</body>
</html>