精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现!

这里写图片描述
精致的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 ,共同学习、解决问题。

附件:http://download.csdn.net/download/china_guanq/10224951

猜你喜欢

转载自blog.csdn.net/China_Guanq/article/details/79164194