H5Sideslip

功能描述

该模块适用于任何列表侧滑导航功能,如微信消息列表侧滑功能,并且同一个列表支持每行侧滑功能按钮数量不一样,如第一行没有侧滑,第二行一个,第三行两个以此类推,满足同一个列表无数个操作功能当入口。两个用例见 demo_win.html。

效果图

依赖的模块

快速使用

html 结构

    <ul>                                                                    <!-- 一级结构  -->
        <li>                                                                <!-- 二级结构  -->
            <div>列表内容布局</div>
            <div class="right-btns">                                        <!-- 侧滑结构  -->
                <div tapmode="hover" onclick="alert('按钮1')">按钮1</div>
                <div tapmode="hover" onclick="alert('按钮2')">按钮2</div>
                <div tapmode="hover" onclick="alert('按钮N')">按钮N</div>
                <!--  ………… -->
            </div>
        </li>
    </ul>

css 结构

    ul{ overflow: hidden; }
    ul li{ position: relative;}
    ul li .right-btns { position: absolute; left: 100%; top: 0; bottom: 0; }

js 调用

    fnIniRightBtns('li');                                                //必填 |           |      String      |  二级 css3 选择器

特别说明

  1. html 结构中 ul li 可以使用任何标签代替,但层级不能变,.right-btns 类必须存在,子级根据项目需求随意布局;
  2. css 必须有文档中的属性值;
  3. 页面具有弹动或者有下拉功能时,需要设置 window['vIsBounces'] = true 全局变量,来让滑动避免与之冲突