地址，通讯录索引选择器
2021-02-23 本文已影响0人
变量只提升声明不提升赋值
image.png
如图，想要实现这种效果。在小程序中实现还是比较简单的。只需要遍历一下元素，利用小程序的scroll-view组件就可以实现。scroll-into-view属性绑定到对应的索引，点击索引就会自动滑动到相应的内容去。
下面讲一下原生如何实现
首先要实现这种效果，肯定是从索引下手。点击索引C就跳转到C内容的位置，那数据结构大概可以这么制定
[
{
letter: 'A',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'B',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'C',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
]
类似于这种。关键实现就在索引这个字段上。
先遍历出内容来，看看页面效果
$.each(list, function (index, item) {
let html = '<h1 class="item_letter">' + item.letter + '</h1><div>' + item.text + '</div>'
let html2 = '<div class="letter">' + item.letter + '</div>'
$('.left').append(html)
$('.right').append(html2)
})
image.png
样式什么的这里就不写了，主要讲一下效果的实现。
首先可以想到的是，要滚动到相应的索引位置。肯定是去设置滚动条的位置了，并且滚动条的位置也肯定是根据左边的内容距离窗口顶部的距离。例如点击了D索引，那滚动条就要滚动到D内容所在的位置。
$('.right div').each(function (index) { //先给右边的索引动态绑定一下点击事件
$(this).on('click', function (e) {
let thisText = $(this).text() //这里拿到当前点击的索引的文本值。
console.log($(this).text())
console.log($(this).offset().top) //获取某个元素距离顶端的位置
$('.left h1').each(function (index, item) { //遍历左边的内容，找到和点击的索引相对应的那一块内容
if ($(item).text() == thisText) {
console.log($(item).text(), $(item).offset().top)
$(document).scrollTop($(item).offset().top) //设置内荣距离顶部的位置给滚动条。
}
})
})
})
具体效果可自行测试，完整代码如下
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>
索引选择器
</title>
<style>
.right {
position: fixed;
left: 1000px;
top: 0px
}
.right div {
cursor: pointer;
padding: 5px 0;
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="left_item">
</div>
</div>
<div class="right" onclick="">
</div>
</div>
</body>
<script>
$(function () {
let list = [{
letter: 'A',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'B',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'C',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'D',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'E',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'F',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'G',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'H',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'I',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'J',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'K',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'L',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'M',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'N',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'O',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'P',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'Q',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'R',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'S',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'T',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'U',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'V',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'W',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'X',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'Y',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
{
letter: 'Z',
text: 'hahahahhahahahahahahahahahahahahahahahahahahhahaha'
},
]
$.each(list, function (index, item) {
let html = '<h1 class="item_letter">' + item.letter + '</h1><div>' + item.text + '</div>'
let html2 = '<div class="letter">' + item.letter + '</div>'
$('.left').append(html)
$('.right').append(html2)
})
$('.right div').each(function (index) {
$(this).on('click', function (e) {
let thisText = $(this).text()
console.log($(this).text())
console.log($(this).offset().top) //获取某个元素距离顶端的位置
$('.left h1').each(function (index, item) {
if ($(item).text() == thisText) {
console.log($(item).text(), $(item).offset().top)
$(document).scrollTop($(item).offset().top)
}
})
})
})
})
</script>
</html>
