地址，通讯录索引选择器

作者: 变量只提升声明不提升赋值 | 来源:发表于2021-02-23 15:32 被阅读0次

地址，通讯录索引选择器
Part 2-2 CSS选择器
JQ二刷
swift-日期选择器
jQuery-01
第八章：Flutter之wechatDemo（通讯录页面下）
Swift.地址选择器
CSS选择器
Android开源控件：字符索引栏EZ-CharIndexBar
UICollectionView、UITableView的索引

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>