精致的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

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雷斯巴能

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值