作者：Z帅来袭
来自：受权地点
转自：微信小顺序同盟​

话不多说，先给你们看看中心数据和构造：

一、数据：

city的json array，letter的array

（city的json array里的首字母是我手工安排进去的，你也能够经由历程for轮回取得city_en的第一个字符来自动增加，然则为了赢得了机能我舍弃了灵活性）

二、规划

左侧是scollview，右侧是sidebar，这个规划假如布不好，能够先去相识下“flex规划”

三、sidebar规划

让sidebar-item的id为当前字母

四、设置sidebar间隔顶部50px，设置sidebar的Item为牢固20px，这个是必需的

.sideBar {
  width: 5%;
  margin-top: 50px;
}

.sideBar-item {
  height: 20px;
}

五、在sidebar上增加事宜bindtouchmove

这个事宜能够猎取当前手指触摸的位置（主假如取得间隔屏幕顶部的pageY），下面是思绪

var pageY = 在touchmove事宜e中取得pageY　

var letterIndex = （pageY – sidebar间隔顶部的50px）/sidebar item的高度20px

var letter = charArray[letterIndex]；

现实代码：

   let letterIndex = (e.changedTouches["0"].pageY- 50) / 20;
   let letter = this.data.letterArray[letterIndex - 1];

　　在此，已取得了你手指触摸的letter了

六、经由历程scroll-view的一个属性来让字母置顶在scroll-view：scroll-to-view，能够把他的值设置为一个id

scrollview的ABCD等索引的ID现实上就是ABCD自身，那末，把第四段落取得的letter经由历程this.setData({toview:letter});

至此，触摸sidebar就能够看到列表经由历程触摸在变化。

七、跋文历程：

近来微信小顺序很火爆，我也尝试着做个天色软件尝尝手，在做到都市列表的sidebar时难倒我了

起首相识scrollview的scroll-to-view属性，把一个ID值赋给这个属性，那末对应ID值的组件就会置顶在scrollview的顶部，举例：

假如“赣州”这个item的id是ganzhou，那你把scroll-to-view的值设置成ganzhou，那scrollview一翻开赣州就会出现在顶部。

接着，研讨微信小顺序的“事宜”，微信小顺序的事宜有以下这些

在一个个尝试后，发明touchmove是最适合本身的，我原本想的是，

既然touchmove事宜会返回touch位置的组件信息，那末我就能够依据组件取得ID值，把ID的值再赋给scoll-to-view,

然则现实上不是我想的如许，他不停返回的都是我手指最最先触摸位置的组件。

末了，我就揣摩让sidebar和sidebar item的位置牢固，经由历程盘算取得letter的位置。