H5Sideslip

功能描述

该插件适用于任何列表侧滑导航功能,无列表布局限制,UI 由自己定义,可以实现如微信消息列表侧滑功能,并且同一个列表支持每行侧滑功能按钮数量不一样,如第一行没有侧滑,第二行一个,第三行两个以此类推,满足同一个列表无数个操作功能入口。demo文件地址

效果图

依赖的插件

快速使用

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      |  html结构中的二级 css3 选择器

特别说明

  1. html 结构中 ul li 可以使用任何标签代替,但层级不能变,.right-btns 类必须存在,子级根据项目需求随意布局;
  2. css 必须有文档中的属性值;
  3. 页面具有弹动或者有下拉功能时,需要设置 window['vIsBounces'] = true 全局变量,来让滑动避免与之冲突
  4. 如果页面有多个一级结构,但只想让某一个一级下的二级侧滑, 那么 fnIniRightBtns 时传入某一个一级下的二级选择器即可,举个栗子:一个页面5个UI,但只想让第四个 UI 下的 LI 有侧滑功能,就可以这样 fnIniRightBtns('ul:nth-child(4) li');
  5. 如果页面有多个一级结构,但想让所有的二级侧滑,那么就直接传入二级选择器即可,像这样:fnIniRightBtns('li');
是否仍需要帮助? 请保持联络!
最后更新于 2024/12/2