作者:Z帥來襲
來自:授權(quán)地址
轉(zhuǎn)自:微信小程序聯(lián)盟?
一贪庙、數(shù)據(jù):
city的json array浆劲,letter的array
(city的json array里的首字母是我手工放置進去的栗柒,你也可以通過for循環(huán)獲得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];
在此彻况,已經(jīng)獲得了你手指觸摸的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一打開贛州就會出現(xiàn)在頂部。
接著裳扯,研究微信小程序的“事件”抛丽,微信小程序的事件有以下這些
在一個個嘗試后,發(fā)現(xiàn)touchmove是最適合自己的饰豺,我原本想的是亿鲜,
既然touchmove事件會返回touch位置的組件信息,那么我就可以根據(jù)組件獲得ID值冤吨,把ID的值再賦給scoll-to-view,
但是實際上不是我想的這樣蒿柳,他不斷返回的都是我手指最開始觸摸位置的組件。
最后漩蟆,我就琢磨讓sidebar和sidebar item的位置固定垒探,通過計算獲得letter的位置。