兩行代碼實現微信小程序聯繫人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的位置。