类似QQ的列表右滑显示菜单

1.引入css样式

<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
 <link rel="stylesheet" type="text/css" href="../css/aui-list-swipe.css"/>

2.设置列表样式 和显示

<!--section 列表分组标签-->
    <section class="aui-content" id="banner">
        <ul class="aui-list-view">
<!--aui-user-view-cell 设置 图片圆角、右侧详情cell的样式   -->        
<!--事件可以随便写 参数当前对象-->
            <li class="aui-user-view-cell aui-img" tapmode onclick="showMsg(this);">
<!--aui-swipe-handle :cell 盒子 的div包含cell的内容  ,控制cell 可以拖动-->            
                <div class="aui-swipe-handle">
                    <!--aui-img-object 设置 图片大小的样式-->
    <!--aui-pull-left 设置居左的样式-->            
                    <img class="aui-img-object aui-pull-left" src="../image/liulangnan.png"/>
    <!--<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
    在文本中加入强调也需要有技巧。如果强调太多，有些重要的短语就会被漏掉；如果强调太少，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。
    尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。
    如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。
    除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 <em> 标签。
    例如，W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。-->   
                    <div class="aui-img-body">
                        <span>流浪男 <em>11M</em> </span>
                        <p class="aui-ellipsis-1">山东 潍坊</p>
                    </div>
                </div>
<!--aui-swipe-right-btn 指定右侧滑动菜单上的按钮 aui-bg-warning背景颜色-->              
                <div class="aui-swipe-right-btn aui-bg-warning" tapmode onclick="rightClick(this)"><i class="aui-iconfont aui-icon-favor"></i></div>
                <div class="aui-swipe-right-btn aui-bg-danger"><i class="aui-iconfont aui-icon-comment"></i></div>
                <div class="aui-swipe-right-btn aui-bg-success"><i class="aui-iconfont aui-icon-delete"></i></div>      
            </li>

            <li class="aui-user-view-cell aui-img" tapmode onclick="showMsg(this)">
                <div class="aui-swipe-handle">
                    <img class="aui-pull-left aui-img-object" src='../image/demo4.png'/>
<!--aui-text-danger 设置文本颜色-->       
                    <div class="aui-img-body">          
                        <span class="aui-text-danger">淡淡的忧伤<em>11.1KM</em></span>
                        <p class="aui-ellipsis-1">山东 潍坊</p>
                    </div>
                </div>
                <div class="aui-swipe-right-btn aui-bg-warning"><i class="aui-iconfont aui-icon-favor"></i></div>
                <div class="aui-swipe-right-btn aui-bg-danger">删除</i></div>
            </li>
        </ul>
</section>

3.设置js事件

首页引入：<script type="text/javascript" src="../script/aui-list-swipe.js"></script>
//初始化 滑动菜单 ListSwipe
    var swipe = new ListSwipe();

//showMsg  执行cell的点击事件
    function showMsg(el){
//  el.classList :元素li中的class
        console.log('cell 点击事件' + el.classList.contains("aui-swipe-selected"));
//el 当前元素对象  classList 获取class列表  contains 是否包含某个class
        if(!el.classList.contains("aui-swipe-selected")){
            api.alert({
                title: '提示消息',
                msg: '正常点击操作'
            });
        }
    }