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

傷城~ 2021-10-19 03:12 863阅读 0赞

## 引言 ##

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

**左滑删除**

![20190815100613606.png][]

**右滑删除 **

![20190815100638428.png][]

**案例源码 **

<!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>

[20190815100613606.png]: /images/20211018/ed7782f6719c451f8a6cd9cacd6fcbe7.png
[20190815100638428.png]: /images/20211018/961698f5e73647faa2f4c7a473c971d5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 MUI实现左滑删除功能

*实现的效果** ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4...

向右看齐/ 2024年04月17日 15:42/ 0 赞/ 31 阅读

相关小程序左滑删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

野性酷女/ 2023年01月17日 07:41/ 0 赞/ 105 阅读

相关 UITableView左滑删除实现

UI层面需要做的事情为tableView设置好delegate后，需要实现以下delegate方法。允许左滑row - (BOOL)tableView

素颜马尾好姑娘i/ 2022年11月21日 15:12/ 0 赞/ 196 阅读

相关 js jquery手指滑动，上滑，下滑，左滑，右滑，事件监听

var startX; var startY; var moveEndX var moveEndY var X var Y

た入场券/ 2022年09月11日 05:20/ 0 赞/ 191 阅读

相关仿QQ左滑删除

QQ作为现在一个社交软件，其内功能相当强大，并且还有很多人性化的交互，今天主要说的就是仿QQ的左滑删除。首先我们使用的是Snap.js的一个插件，GitHub地址[http

墨蓝/ 2022年06月12日 20:29/ 0 赞/ 177 阅读

相关 jQuery实现移动端左滑删除功能

在手机移动端，经常需要实现类似微信聊天工具中的左滑动删除和右滑动恢复功能。这里，我们可以直接使用jQuery来实现该效果。基本原理：利用jQuery中的tou

分手后的思念是犯贱/ 2022年06月05日 12:22/ 0 赞/ 496 阅读

相关小程序左滑删除功能

在使用wepy框架中，对左滑删除功能做解释，通过touch事件的起止，完成事件的绑定和数据刷新，来达到效果，大致代码如下： wxml `<view class="touc

灰太狼/ 2022年05月16日 12:58/ 0 赞/ 231 阅读

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

项目中需要用到类似qq的菜单左滑删除功能 ![20190114180955129.gif][] mui的app中可以看到此功能，但是官方文档中无法找到此组件如果需要此页

客官°小女子只卖身不卖艺/ 2022年04月22日 21:02/ 0 赞/ 241 阅读

相关小程序实现左滑删除功能

小程序中实现左滑删除效果预览： ![左滑删除图][20181120171151110.gif] // wxml <view class="dele

柔光的暖阳◎/ 2022年04月15日 02:48/ 0 赞/ 253 阅读

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

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

傷城~/ 2021年10月19日 03:12/ 0 赞/ 864 阅读