一个完整的字母导航栏功能包括三个部分，可按需食用：
1.点击跳转
2.滑动更新
3.保存选中

一、点击跳转功能

主要思路是利用微信自带的<scroll-view>组件的scroll-into-view属性，非常方便。

1.在需要进行跳转的scroll-view组件上绑定scroll-into-view属性
2.绑定的属性值必须为动态值，与跳转目标的id对应，如：{{toView}}
3.设置跳转目标所在元素的id进行定位（关键！！）
示例代码如下：

    <scroll-view scroll-into-view="{{toView}}">
        <view id="{{ item.firstChar }}">{{ item.firstChar }}</view>
    </scroll-view>

4.在字母导航列表上绑定事件和自定义属性data-xxxx，以便事件的捕获currentTarget.dataset
示例代码如下：

<view wx:for="{{sortedCityList}}" 
      data-first-char="{{item.firstChar}}" 
      bindtap="handleToView"
      >
      {{item.firstChar}}
</view>

5.在js文件中定义toView变量和handleToView事件
示例代码如下：

  data: {
    toView: "A", // 用户点击的字母id
  },
  handleToView: function (event) {
    let view = event.currentTarget.dataset.firstChar
    this.setData({
      toView: view
    })
  }

但是！这里还有个小问题
那就是，如果将对应的跳转元素设置了：position: sticky属性，从上往下点击时能正常跳转，但从下往上点击时，会出现跳转不到期望位置的情况，这个问题有待解决。

二、滑动更新

滑动页面时同步更新导航栏的选中样式，实现的主要思路是，首先使用wx.createSelectorQuery()获取每个字母标题对应的高度以及对应的字母id，然后使用scroll-view组件的bindScroll监听当前页面的高度进行比较并赋值
示例代码如下：

    // 获取每个字母标题对应的高度及对应字母id,并存储起来，第二次进入页面时判断，不能重复计算
    if (heightArray.length === 0) {
      let that = this
      setTimeout( function () {
        const query = wx.createSelectorQuery()
        query.selectAll('.first-character').boundingClientRect( function (rect) {
          rect.forEach( function (value) {
            heightArray.push({ 'height': value.top , 'letter': value.id })
          })
          that.setData({
            heightArray
          })
          app.store.heightArray = heightArray
        }).exec()
      },1)
    }

得到heightArray后，通过bindScroll事件绑定触发方法，在滚动时进行判断：

  letterScroll (event) {
    //如果实时判断影响性能的话，可以用清除定时器的方法节流
    //   clearTimeout(this.data.timeId)
    this.data.timeId = setTimeout( () => {
      let currentScrollTop = event.detail.scrollTop // 滚动条距离顶部的实时距离
      const heightArray = this.data.heightArray
      for (let i = 0; i <= heightArray.length; i++) {
        // 判断是否滑到最后一个字母
        if (currentScrollTop >= heightArray[heightArray.length-1].height) {
          this.setData({
            currentLetter: heightArray[heightArray.length-1].letter
          })
          // console.log('currentScrollTop',currentScrollTop)
          // console.log(heightArray)
          // console.log('end:',this.data.currentLetter)
          break
        }else if (currentScrollTop < heightArray[i+1].height) {
          this.setData({
            currentLetter: heightArray[i].letter
          })
          // console.log('currentScrollTop',currentScrollTop)
          // console.log('currentScroll',this.data.currentLetter)
          break
        }
      }
    },200)
  }

三、保存选中
主要思路是将状态变量存到app的data中，初始化时从app data读取并赋值。