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