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/11/18