MUI列表滑动操作

ZenPower

已于 2022-01-29 10:14:55 修改

阅读量5.3k

点赞数 4

分类专栏： MUI 文章标签： mui mui-slider

于 2017-08-15 10:42:14 首次发布

本文链接：https://blog.youkuaiyun.com/mypowerhere/article/details/77184793

版权

MUI 专栏收录该内容

2 篇文章

订阅专栏

前言：通过MUI等目前流行的前端框架，我们可以生成接近原生APP体验的界面。

列表滑动操作，使用了mui-table-view和mui-slider两个组件。

1.界面部分：

注：需要引入mui的样式和脚本外链

<html>
  <head>
  	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<link rel="stylesheet" href="css/mui.min.css" />
  	<script type="text/javascript" src="js/mui.min.js"></script>
  </head>
  <body> 
  	<div class="mui-content">
      <ul id="mtb" class="mui-table-view">
      	<li class="mui-table-view-cell mui-media">
      		<div class="mui-slider-left mui-disabled">
      			<a class="mui-btn mui-btn-yellow">左删除</a>
      		</div>
      		<div class="mui-slider-right mui-disabled">
      			<a class="mui-btn mui-btn-red">右删除</a>
      		</div>
      		<div class="mui-slider-handle">
      			<img class="mui-media-object mui-pull-left" src="./img/aboutme.png">
      			<div class="mui-media-body">
      				瑞恩·雷诺兹
      				<p class='mui-ellipsis'>加拿大,不列颠哥伦比亚省,温哥华</p>
      			</div>
      		</div>
      	</li>  	
      	
      	<li class="mui-table-view-cell mui-media">
      		<div class="mui-slider-left mui-disabled">
      			<a class="mui-btn mui-btn-yellow">左删除</a>
      		</div>
      		<div class="mui-slider-right mui-disabled">
      			<a class="mui-btn mui-btn-red">右删除</a>
      		</div>
      		<div class="mui-slider-handle">
      			<img class="mui-media-object mui-pull-left" src="./img/aboutme.png">
      			<div class="mui-media-body">
      				威尔·史密斯
      				<p class='mui-ellipsis'>美国,宾夕法尼亚州,费城</p>
      			</div>
      		</div>
      	</li>  
      </ul> 
    </div>
  </body>
</html>

2.JS部分：

事件绑定方法可以通过on()函数批量绑定，也可以通过addEventListene()函数绑定单个元素。

    <script type="text/javascript">
    	//定义mui.confirm提示框按钮内容
    	var btnArray = ['确认', '取消'];    	
    	
    	/* 
    	  【事件绑定方法1】
    	  1.通过JS匿名函数传参的形式：(function($){...})(mui); 其中实参为mui；
    	  2.通过$()方法返回匹配指定css选择器的元素；
    	  2.通过on()方法实现批量元素添加监听事件；
      */
    	(function($) {
    		$('#mtb').on('tap', '.mui-btn-yellow', function(event) {
    			//获取当前DOM对象<a>
    			var elem = this;
    			//获取当前DOM对象的父，父节点<li>
    			var li = elem.parentNode.parentNode;
    			mui.confirm('确认删除？', '提示', btnArray, function(e) {
    				if (e.index == 0) {
    					//确认：获取li节点的父节点，即<ul>，并调用removeChild()方法删除当前选中的子节点<li>
    					li.parentNode.removeChild(li);
    				} else {
    					//取消：关闭滑动列表
    					$.swipeoutClose(li);
    				}
    			});
    		});
    	})(mui);   

      /* 
    	  【事件绑定方法2】
    	  1.通过mui()方法返回匹配指定css选择器的元素；
    	  2.通过on()方法实现批量元素添加监听事件；
      */
    	mui('#mtb').on('tap', '.mui-btn-yellow', function(event) {
        //获取当前DOM对象<a>
    		var elem = this;
        //获取当前DOM对象的父，父节点<li>
    		var li = elem.parentNode.parentNode;
    		mui.confirm('确认删除？', '提示', btnArray, function(e) {
    			if (e.index == 0) {
            //确认：获取li节点的父节点，即<ul>，并调用removeChild()方法删除当前选中的子节点<li>
    				li.parentNode.removeChild(li);
    			} else {
            //取消：关闭滑动列表
    				mui.swipeoutClose(li);
    			}
    		});
    	});
    	   	
    	/*
    	  【事件绑定方法3】
    	  注：此方法只能绑定一个元素！
    	  1.通过querySelector()方法只能返回匹配指定CSS选择器的第一个元素；
    	  2.通过addEventListener()方法可为该元素添加监听事件；
      */
    	document.querySelector(".mui-btn-red").addEventListener("tap",function(){ 	
    		//获取当前DOM对象<a>
    		var elem = this;
    		//获取当前DOM对象的父，父节点<li>
      	var li=this.parentNode.parentNode;	
      	mui.confirm("确认删除？","提示",btnArray,function(e){
          if(e.index==0){
          	//确认：获取li节点的父节点，即<ul>，并调用removeChild()方法删除当前选中的子节点<li>
          	li.parentNode.removeChild(li);
          }else{
          	//取消：关闭滑动列表     	
          	mui.swipeoutClose(li);
          }
        });
      });
      
    </script>

实现界面如下：