版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37596829/article/details/82388042
pc/app字母索引
简介：这是一个通过字母索引滚动到对应位置的代码片段；
实现思路
难点：1.如何知道滚动到哪个位置
A.数据格式
1.索引通过绝对定位（position:fixed）在一边
2.数据结构排序好，还有当前序号下的对应数据
var data = [{
title:'a',
items:[]
}]
3.热门数据-提取未排序数据的前10条
B.实现原理
1.加载完数据之后索引定位位置组成数组
2.jq scroll 滚动距离-和以上数组判断获取滚动下标-滑到制定位置
2.索引点击下标滑动位置
代码干货
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title class="titleImg">字母索引</title>
<link rel="icon" href="img/bitbug_favicon.ico" type="image/x-icon" />
<!--小图标-->
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ol,
ul,
li {
list-style: none;
}
.rela {
position: relative;
}
.a-z {
position: fixed;
z-index: 30;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 18px;
padding: 20px 0;
text-align: center;
font-size: 12px;
line-height: 18px;
}
.a-z ul>li{
overflow: hidden;
white-space:nowrap;
}
.a-z ul>li.active{
border-radius: 10px;
background: #2AC845;
color: #FFFFFF;
}
.list-group {
background: #fff;
}
.list-group-title,
.fixed-title,
.list-group-item {
height: 30px;
line-height: 30px;
padding-left: 20px;
font-size: 12px;
}
.list-group-title {
background: #d7d4d4;
color: #FFFFFF;
}
.list-group-item {
border-bottom: 1px solid #F5F5F5;
}
.list-fixed {
position: fixed;
top: 44px;
left: 0;
width: 100%;
z-index: 1;
background: #d7d4d4;
color: #FFFFFF;
}
.head-bar-nav {
position: fixed;
z-index: 2;
top: 0;
right: 0;
left: 0;
height: 44px;
padding-right: 10px;
padding-left: 10px;
border-bottom: 0;
background-color: #f7f7f7;
}
.head-bar {
-webkit-box-shadow: 0 1px 6px #ccc;
box-shadow: 0 1px 6px #ccc;
}
.head-title {
right: 40px;
left: 40px;
display: inline-block;
overflow: hidden;
width: auto;
margin: 0;
text-overflow: ellipsis;
font-size: 17px;
font-weight: 500;
line-height: 44px;
position: absolute;
padding: 0;
text-align: center;
white-space: nowrap;
color: #000;
}
.nav-content {
padding-top: 44px;
background-color: #efeff4;
}
</style>
<body class="">
<div class="a-z">
<ul></ul>
</div>
<header class="head-bar head-bar-nav">
<h1 class="head-title">字母索引</h1>
</header>
<div class="nav-content">
<div class="rela">
<ul class="listview">
<li class="list-group">
<h2 class="list-group-title"></h2>
<ul>
</ul>
</li>
</ul>
<div class="list-fixed">
<div class="fixed-title">
热
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// data 的结构
// var data=
// {
// code: 0,
// data: {
// list: [
// {
// Fsinger_name:'',
// Fsinger_mid:'',
// Findex: "X"
// }
// },
// {
// Fsinger_name:'',
// Fsinger_mid:'',
// Findex: "X"
// }
// }
// }
// 排序好的结构
// var data = [{
// title:'a',
// items:[]
// }]
var HOT_NAME = '热门';
var HOT_SINGER_LEN = 10;
var TITLE_HEIGHT = 30;
var dataIem = AjaxData.data.list;
var map = {
hot: {
title: HOT_NAME,
items: []
}
}
dataIem.forEach(function(item, index) {
if(index < HOT_SINGER_LEN) {
map.hot.items.push({
name: item.Fsinger_name,
id: item.Fsinger_mid
})
}
var key = item.Findex
if(!map[key]) {
map[key] = {
title: key,
items: []
}
}
map[key].items.push({
name: item.Fsinger_name,
id: item.Fsinger_mid,
})
})
// 为了得到有序列表，我们要处理map
var hot = []
var ret = []
for(var key in map) {
var val = map[key];
var reg = /[a-zA-Z]/;
if(reg.test(val.title)) {
ret.push(val);
} else if(val.title === HOT_NAME) {
hot.push(val);
}
}
ret.sort(function(a, b) {
return a.title.charCodeAt(0) - b.title.charCodeAt(0);
})
// 排序好的新结构数据 newData
var newData = hot.concat(ret);
// 回填数据
var listItemClone = $(".list-group").clone();
$(".list-group").remove();
var listItemList = '<li class="list-group-item"></li>';
newData.forEach(function(item,index){
var listItem = $(listItemClone).clone();
$(listItem).find('.list-group-title').text(item.title);
item.items.forEach(function(list,ide){
var ItemList = $(listItemList).clone();
$(ItemList).text(list.name);
$(listItem).find('ul').append(ItemList);
})
$(".listview").append(listItem);
var name = item.title.length>1?item.title.substring(-1,1):item.title;
$(".a-z ul").append('<li class="aboutTabList">'+name+'</li>');
})
var contentH =$("header").height();
// scorll js
var heightAt = [];
$.extend({
init: function() {
$(".list-group-title").each(function(ide) {
var top = $(this).offset().top;
heightAt.push(top);
})
$.scrollLeft(0);
$._scrollTop(0);
$(window).on('scroll', $._scroll);
$(".aboutTabList").click(function() {
var ide = $(this).index();
$._scrollTop(ide);
})
},
scrollLeft: function(ide) {
$(".aboutTabList").eq(ide).addClass('active').siblings().removeClass('active');
var textTit = $(".aboutTabList").eq(ide).text();
$(".fixed-title").text(textTit);
},
_scroll: function(_scrollY, ifClick) {
var windowT = $(window).scrollTop() + contentH+2;
if(ifClick == 1) {
windowT = _scrollY;
}
for (var i=0;i<heightAt.length-1;i++) {
var heightTop1 = heightAt[i];
var heightTop2 = heightAt[i + 1];
if(windowT >= heightTop1 && windowT < heightTop2) {
var newVal = heightTop2-windowT;
$.diff(newVal)
$.scrollLeft(i);
}
}
},
_scrollTop: function(ide) {
$("html, body").animate({
scrollTop: $(".list-group-title").eq(ide).offset().top - contentH + "px"
}, 500);
},
diff:(function(newVal){
var fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0;
if (this.fixedTop === fixedTop) {
return
}
this.fixedTop = fixedTop;
$(".list-fixed").css({
'transform':'translate3d(0,'+fixedTop+'px,0)'
})
})
})
$.init();
</script>
</html>