html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...

只做实现。。完全没考虑性能优化。所以我实现了以后特别卡。

第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。

思路：监听touchmove事件，获取clientX和clientY，传入到elementFromPoint，然后获取到元素以后执行click()即可。

这里会有个问题，就是如果你的页面中有遮罩层这一类的顶层元素的话，请将其pointer-events:none，就算这个元素的display:none;也没用，实践出真知。可以去试下。

index为索引div的id

$("#index").get(0).addEventListener('touchmove',function(event){

var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;

a.click();

});

第二个我是想在页面滑动到某个字母的位置时显示闪一下这个字母。

思路：监听scroll事件，同样利用elementFromPoint获取你想要的位置的对应元素，然后执行显示效果即可。

ps: 使用的是weui

$(window).scroll(function(){

var a = document.elementFromPoint(0,0);

if($(a).hasClass("weui_cells_title"))

{

$(".weui_toast_content_my").html($(a).attr("name"));

$("#toast").show(0);

$("#toast").slideUp(300);

}

});

好了，结束。

以上这篇js实现做通讯录的索引滑动显示效果和滑动显示锚点效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...相关推荐

mysql left join 索引失效_MySQL索引列上做操作导致索引失效案例分析
索引列上做操作导致索引失效通常我们认为只要建立索引就可以万事大吉,以为只要建立就一定会使用到,可其实在索引列上的计算.函数.类型转换都可能导致索引失效,所以我们不仅要会创建索引,更重要的是如何正确的 ...
【Android 仿微信通讯录导航分组列表-下】自定义View为RecyclerView打造右侧索引导航栏IndexBar
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52420706 本文出 ...
小程序Swiper组件做日历（周历）左右滑动动态修改数据
使用Swiper做一个周日历功能,要求滑动swiper时,可以显示上一周/下一周的日期. 一开始设想的是使用二维数组存放3个周的日期,右滑时push接下来的周,然后shift第一项,左滑反之,试了几种 ...
js第三节-自定义属性、索引值
js第三节-自定义属性.索引值第一节陈明吕老师就大致提了一下自定义属性这个概念,自定义属性是我们自己给元素添加的属性,不是元素天生就存在的.自定义属性最常用的是索引值.举个例子来讲一下: 一.自定义 ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
html怎么做搜索框索引,创建并使用HTML全文搜索索引(C)
这个过程通常被称为 information retrieval.你可能会发现 this online book有帮助. 现有图书馆这里有两个现有的解决方案可以完全集成到一个应用程序中,而不需要单独的 ...
php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
Python，得到列表最小k个数或最大k个数的索引
如果是直接得到最小或最大k个数,那么直接排序即可.但是如果要得到索引,那么不能排序,或者你排序时附带数据的下标.本文通过两种方法来展示怎么得到最小k个数的索引,一种是直接使用min()函数得到列表的最 ...
mysql 分段执行_19个MySQL优化技巧，索引优化这样做最有效！
- 点击上方"中国统计网"订阅我吧!- 声明:下面的优化方案都是基于" Mysql-索引-BTree类型 "01善用EXPLAIN 做MySQL优化,我们要善用 ...

html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...

html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...相关推荐

最新文章

热门文章