【微信小程序】小程序仿通讯录功能

微信小程序模仿通讯录功能需要用到scroll-view标签

思路：首先需要获取到你所需要展示的数据样式的高度(这就需要用到微信给我们提供的一个API来完成了，因为小程序是没有DOM树结构的，这个可以去看我的前一篇里面有详细的记载怎么获取想要的元素的宽高。)，然后组合成一个高度数组(便于后面根据这个数组进行判断)，再获取滚动距离，用这两个比较判断之后就可以得出滚动的时候右边选中的字母了，然后再利用scroll-view标签的scroll-into-view属性来实现点击右侧导航字母，对应的左侧列表滚动到相应的位置。(每个人的想法不同，解法和理解也不太可能相同。所以，按自己的心走就好了)，话不多说，上代码！

wxml

<view>
  <!-- 左侧列表内容部分 -->
  <scroll-view class="content" enable-back-to-top scroll-into-view="{
  {toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">
    <view wx:for="{
  {listMain}}" wx:for-item="group" wx:key="{
  {group.id}}" id="{
  { 'inToView'+group.id}}" data-id='{
  {group.id}}'>
      <view class=&