微信小程序之滑动右侧字母索引

微信和通讯录经常看到这种，那么在小程序如何实现呢（等下我们需要用到小程序的一个官方组件），这个功能可以拆分两块，一个是滚动区域，一个是滑动定位区域。

实现
滚动区域
小程序里面实现滚动到指定位置，可以用 scroll-view 组件. （点击我即可查看小程序文档）

<scroll-view class="goup_list" scroll-with-animation="true" scroll-y="true" style="height: 300rpx;" scroll-into-view="{
  {toView}}">
    <具体业务界面代码 />
</scroll-view>

最后面是我刚刚录gif的代码。可以看到 scroll-view 组件，有一个属性 scroll-into-view ,这个属性可以实现转跳到指定位置。值是id，也就是Gif看到的 B、C、D的ID。

（最后会有完整代码）

滑动实现
滑动我们会想到 touchmove 事件，我们需要依靠这个判断滑动到了哪个索引（字母）。

但是滑动里面没有直接告诉你，是哪个组件，所以我们需要根据现有的信息进行利用，这里用的是y,x的信息。

拿到x,y之后的逻辑如下

用文字不好描述清楚，看下面图，可以这样求偏差值，然后除以每项的高度，就拿到了滑动到了第几项。 这里又涉及一个问题就是，怎么求单个项的高度。 height / 个数。

代码

var y = e.touches[0].pageY;
    var itemLen = this.data.list.length
    var height = letterDomRes.height
    var top = letterDomRes.top
    // 滑动的偏移量（偏差值）
    var offsetTop = (height + top - y)
    var itemHeight = height / itemLen
    var index = itemLen - ((offsetTop / itemHeight)|0) - 1
    if(index < 0 || index >= itemLen){
      return
    }

还有就是上面数据从哪里来，也就是小程序如何拿下图中的top值和height。

代码