一个完整的字母导航栏功能包括三个部分，可按需食用：
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读取并赋值。
