摘要：七后記過程最近微信小程序很火爆，我也嘗試著做個天氣軟件試試手，在做到城市列表的時難倒我了首先了解的屬性，把一個值賦給這個屬性，那么對應(yīng)值的組件就會置頂在的頂部，舉例如果贛州這個的是，那你把的值設(shè)置成，那一打開贛州就會出現(xiàn)在頂部。

作者：Z帥來襲
來自：授權(quán)地址
轉(zhuǎn)自：微信小程序聯(lián)盟?

話不多說，先給你們看看核心數(shù)據(jù)和結(jié)構(gòu)：

city的json array，letter的array

（city的json array里的首字母是我手工放置進去的，你也可以通過for循環(huán)獲得city_en的第一個字符來自動添加，但是為了贏得了性能我舍棄了靈活性）

左邊是scollview，右邊是sidebar，這個布局要是布不好，可以先去了解下“flex布局”

讓sidebar-item的id為當(dāng)前字母

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

.sideBar-item {
  height: 20px;
}

這個事件可以獲取當(dāng)前手指觸摸的位置（主要是獲得距離屏幕頂部的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];

　　在此，已經(jīng)獲得了你手指觸摸的letter了

scrollview的ABCD等索引的ID實際上就是ABCD本身，那么，把第四段落獲得的letter通過this.setData({toview:letter});

至此，觸摸sidebar就可以看到列表通過觸摸在變化。

七、后記過程：

最近微信小程序很火爆，我也嘗試著做個天氣軟件試試手，在做到城市列表的sidebar時難倒我了

首先了解scrollview的scroll-to-view屬性，把一個ID值賦給這個屬性，那么對應(yīng)ID值的組件就會置頂在scrollview的頂部，舉例：

如果“贛州”這個item的id是ganzhou，那你把scroll-to-view的值設(shè)置成ganzhou，那scrollview一打開贛州就會出現(xiàn)在頂部。

接著，研究微信小程序的“事件”，微信小程序的事件有以下這些

在一個個嘗試后，發(fā)現(xiàn)touchmove是最適合自己的，我原本想的是，

既然touchmove事件會返回touch位置的組件信息，那么我就可以根據(jù)組件獲得ID值，把ID的值再賦給scoll-to-view,

但是實際上不是我想的這樣，他不斷返回的都是我手指最開始觸摸位置的組件。

最后，我就琢磨讓sidebar和sidebar item的位置固定，通過計算獲得letter的位置。