2018-4-19 蓝蓝
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果，写出来的代码，代码的结构基本一样，但功能会少一些，去掉了搜索框搜索，只有单纯的字母索引，不过这也基本够用了。这个效果是基于 jQuery 库的，所以在用的时候就记得引入 jQuery 库。
移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果，写出来的代码，代码的结构基本一样，但功能会少一些，去掉了搜索框搜索，只有单纯的字母索引，不过这也基本够用了。这个效果是基于 jQuery 库的，所以在用的时候就记得引入 jQuery 库。
效果图
为了版面美观我专门用横屏截了个图，正如你所看到的，样板还是挺好看的，那功能怎么样呢？效果演示地址：http://yunkus.com/demo/indexlist/index.html ，注意 PC 端要切换到手机模式下浏览，如果是手机浏览就直接出效果了。
思路：
1.布局好页面（包括列表内容，A~Z字母索引导航），右侧导航盒子（index-bar）的高度及每个字母父盒子（a 标签）的高度都通过 JavaScript 来动态控制，因为不同手机屏幕高度不一样，在这里你也可以多做一步，比如：当手机从竖屏换到横屏时自动更新元素的样式，以达到不刷新页面就可以达到很好的效果，或者可以直接禁止横屏。
2.手指在索引导航上点击或者滑动时，内容列表对应滚动到视窗顶部。
3.第个字母对应的内容滚动距离可以通过字母离父元素里的距离来获取。
自己在做这个的时候，也遇到了一些自己也无法理解的问题。比如：
_this.indexBar.bind('touchstart',function() {
indexStart(event);
});
为什么我给匿名函数传个 event 就会出问题，只能像上面那样在 indexStart() 方法里传？
// 这样就会出问题
_this.indexBar.bind('touchstart',function(event) {
indexStart(event);
});
不过通过研究 MUI 里的索引列表效果，也让我学到了不少。比如：document.elementFromPoint(x,y)方法，这个方法还是挺有用的，可以通过一个点坐标来获取到页面中的元素。例子中的通过手指不离屏向下滑动查看内容就是通过这个方法来实现的。
这里还有一个好东西想分享下给大家，锤子手机里头的通讯录的这个效果功能更强大，体验更贴心。如果你没手这款手机，可以看下面的这个截图。如果你，我想你应该也知道了。这个效果确实更符合国情。
不一样的锤子风格
图片有点高，本来想截个横屏的图，但发现锤子手机禁止了横屏操作，也就是我们前面提到的方案。
这个功能的强大之处在于，你不权可以像上面那样通过右侧的字母索引列表来索引，你还可以把手指放在右侧字母索引列表上，然后向左滑动，就会出现一个更大的字母索引26宫格，你可以点击字母或者长按字母，字母上就会弹出对应的内容。
这个效果在 Iphone 下的 safari 浏览器或者某些 android 机下浏览时会出现滚动卡顿或者滚动滚起不舒畅的现象，要解决这个问题也非常简单，给添加了overflow-y: auto; CSS属性的元素追加-webkit-overflow-scrolling: touch; 样式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
您可以选择一种方式赞助本站
支付宝转账赞助
