精致的H5 列表侧滑组件。H5页面侧滑删除、修改的效果。这里只支持手机端访问,Chrome浏览器调试 切换到Mobile 调试模式
学习无止境,何时是终点、时间让人沉思。代码分享,是对以下文章的更新版本! http://blog.csdn.net/china_guanq/article/details/78297430
此此修改,大部分整理修改了组件存在的Bug 以及优化处理。为了不给自己埋井以及不给大家埋井,也是一时兴趣对组价的更新优化。 希望在一些需要侧滑功能而 本身框架没有支持侧滑功能的 得到帮助。以及提供给大家参考学习。
1、解决页面快速滚动 侧滑菜单按钮闪烁 导致难堪的用户体验。
2、解决侧滑时 在IOS 端页面被整体下拉或者上拉出现背景色的问题。
3、解决 网络请求从而触发页面 新增侧滑元素,侧滑无效的问题。
4、由于页面元素节点不同、nodeName属性不同导致无法获取 侧滑列表的bug。
5、提升侧滑体验,仿微信侧滑列表。
组件初始化使用方法:
1、构建侧滑主体,注意主体class 类名不可改变。
<!--侧滑容器,这里为了做IOS 体验适配问题,或者参考源码调整。建议保留-->
<div id="scrollWrap">
<div class="listContext" id="listContext">
<div class="list">
<div class="sideslipBody">
<!--主题内容Begin-->
<!--这里写自己的侧滑样式-->
<!--主题内容End-->
</div>
<!--这里编写右侧 侧滑菜单,自定高度样式。-->
<div class="sideslipTitle right">
<a class="subRight collection" onclick="Delete()">收藏</a>
<a class="subRight update" onclick="Update()">修改</a>
<a class="subRight delete" onclick="Delete()">记忆</a>
</div>
</div>
</div>
</div>
2、引入JS ,初始化页面侧滑dom,实现侧滑效果、监听手势侧滑。
<script type="text/javascript" src="sideslipMob.js"></script>
这里告诉大家基组件基本初始化使用方法。具体演示请下载以下最新版本附件Dom。或者加入Q群:595377655 ,共同学习、解决问题。