類似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: '正常點擊操作'
            });
        }
    }