两行代码实现微信小程序联系人sidebar

做者：Z帅来袭

来自：受权地址

转自：微信小程序联盟​

 

1、数据：

 

city的json array，letter的array

（city的json array里的首字母是我手工放置进去的，你也能够经过for循环得到city_en的第一个字符来自动添加，可是为了赢得了性能我舍弃了灵活性）

 

 

 

 

2、布局

 

左边是scollview，右边是sidebar，这个布局要是布很差，能够先去了解下“flex布局”

 

 

3、sidebar布局

 

让sidebar-item的id为当前字母

 

 

 

4、设置sidebar距离顶部50px，设置sidebar的Item为固定20px，这个是必须的

 

 

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

.sideBar-item {
  height: 20px;
}

 

 

 

5、在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了

 

 

6、经过scroll-view的一个属性来让字母置顶在scroll-view

 

scroll-to-view，能够把他的值设置为一个id，

scrollview的ABCD等索引的ID实际上就是ABCD自己，那么，把第四段落得到的letter经过this.setData({toview:letter});

 

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

 

 

7、后记过程：

 

最近微信小程序很火爆，我也尝试着作个天气软件试试手，在作到城市列表的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的位置。