功能需求：在移动端页面开发，当列表的一个条目发生左滑、右滑时唤出备选菜单以供操作
功能实现：
第一步：引入MUI的CSS和JS文件
<link href="https://www.dcloud.net.cn/hellomui/css/mui.min.css" rel="stylesheet"> <script src="https://www.dcloud.net.cn/hellomui/js/mui.min.js"></script>
第二步：编写所需DOM结构
<body class="mui-ios mui-ios-13 mui-ios-13-2 mui-ios-13-2-3" style="zoom: 1;"> <div> 拖拽后显示操作图标，点击操作图标删除元素↓ <ul id="itemList1" class="mui-table-view"> <li class="mui-table-view-cell"> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-blue">编辑</a> <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-blue">编辑</a> <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-blue">编辑</a> <a class="mui-btn mui-btn-red">删除</a> </div> <div class="mui-slider-right mui-disabled"> <a class="mui-btn mui-btn-blue">编辑</a> <a class="mui-btn mui-btn-red">删除</a> </div> <div class="mui-slider-handle"> 左右滑动均可显示删除按钮 </div> </li> </ul> 向左拖拽后显示操作图标，释放后自动触发的业务逻辑 <ul id="itemList2" 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> </div> </body>
编写所需JS：
<script> mui.init(); (function ($) { var btnArray = ['确认', '取消']; //拖拽后显示操作图标，点击操作图标删除元素 $('#itemList1').on('tap', '.mui-btn', function (event) { var elem = this; var li = elem.parentNode.parentNode; mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定' + this.innerText + '此条信息？</h3></div>', '温馨提醒', btnArray, function (e) { // if (e.index == 0) { // li.parentNode.removeChild(li); // } else { // setTimeout(function () { // $.swipeoutClose(li); // }, 0); // } }); }); //向左拖拽后显示操作图标，释放后自动触发的业务逻辑 $('#itemList2').on('slideleft', '.mui-table-view-cell', function (event) { var elem = this; mui.confirm('<div class="text"><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function (e) { if (e.index == 0) { elem.parentNode.removeChild(elem); } else { setTimeout(function () { $.swipeoutClose(elem); }, 0); } }); }); // //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑 $('#itemList2').on('slideright', '.mui-table-view-cell', function (event) { var elem = this; mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function (e) { if (e.index == 0) { elem.parentNode.removeChild(elem); } else { setTimeout(function () { $.swipeoutClose(elem); }, 0); } }); }); })(mui); </script>
运行结果:
