jQuery WeUI 实战记之-滑动删除

title: jQuery WeUI 实战记之-滑动删除

tags:  jQuery WeUI, 微信公众号,UI

一、使用前提

引入必要文件

<link rel="stylesheet" href="dist/lib/weui.min.css">

<link rel="stylesheet" href="css/jquery-weui.css">

***<link rel="stylesheet" href="css/demos.css">***非必须

<script src="js/jquery-2.1.4.js"></script>

***<script src="dist/lib/fastclick.js"></script> ***非必须

<script src="dist/js/jquery-weui.min.js"></script>

二、常规使用(官网使用)

  参考：weui官网(http://jqweui.com/)

三、动态使用(实战)

        在实践项目中，我们很少会像官网那样使用（除非你只是回写html），在这里我就来分享一下我的项目中的  使用技巧，根据后台数据动态创建滑动的html

代码如下：

for (var i = 0; i < 2; i++) {

  var html2 = '<div class="weui-cell weui-cell_swiped"><div   class="weui-cell__bd"><div class="weui-cell">';

html2 += '<div class="weui-cell__bd"><p>左滑列表</p></div>';

html2 += '<div class="weui-cell__ft">向左滑动试试</div></div></div>';

html2 += '<div class="weui-cell__ft">';

html2 += '<a class="weui-swiped-btn weui-swiped-btn_warn close-swipeout" href="javascript:">取消</a></div></div>';

$("#addHtml").append(html2);

}

主要是在动态创建html结束后，在执行：$('.weui-cell_swiped').swipeout();,你就可以顺利的使用滑动删除和滑动功能了