列表滑动管理

左滑动出按钮的交互可以利用zepto的fx.js动画模块实现,代码较少,所以并没有做成插件或者组件形式。

实现原理:

注意:列表滑动管理触发事件是swipeLeftswipeRight,请使用开发者工具模拟触摸。

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

实现代码

滑动列表管理适用于很多种情况,原理大致相同。
//滑动列表管理
 <ul id="swiper" class="o-h">
 	<li class="item h10">
 		<div class="w75 fl">左滑动出现按钮</div>
 		<div class="w10 h10 fl bg-color-success color8">
 			<i class="icon iconfont icon-fanhuidingbu"></i>
 		</div>
 		<div class="w10 h10 fl bg-color-warning color8">
 			<i class="icon iconfont icon-deletefill"></i>
 		</div>
 	</li>
 </ul>
 <script type="text/javascript">
 	$('#swiper .item').live("swipeLeft", function() {
 		$(this).animate({
 			'margin-left': '-2rem'
 		}, 200, 'linear');
 	});
 	$('#swiper .item').live("swipeRight", function() {
 		$(this).animate({
 			'margin-left': '0'
 		}, 200, 'linear');
 	});
 </script>

案例补充样式如下:

ul {border-top: 1px solid #ccc}
 .item {width: 9.5rem; border-bottom: 1px solid #ccc; line-height: 1rem}