H5Sideslip

功能描述

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

效果图

H5Sideslip - 图1 H5Sideslip - 图2 H5Sideslip - 图3

依赖的模块

无

快速使用

html 结构

  1.     <ul>                                                                    <!-- 一级结构  -->
  2.         <li>                                                                <!-- 二级结构  -->
  3.             <div>列表内容布局</div>
  4.             <div class="right-btns">                                        <!-- 侧滑结构  -->
  5.                 <div tapmode="hover" onclick="alert('按钮1')">按钮1</div>
  6.                 <div tapmode="hover" onclick="alert('按钮2')">按钮2</div>
  7.                 <div tapmode="hover" onclick="alert('按钮N')">按钮N</div>
  8.                 <!--  ………… -->
  9.             </div>
  10.         </li>
  11.     </ul>

css 结构

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

js 调用

  1.     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’);