摘要:七后記過程最近微信小程序很火爆,我也嘗試著做個(gè)天氣軟件試試手,在做到城市列表的時(shí)難倒我了首先了解的屬性,把一個(gè)值賦給這個(gè)屬性,那么對(duì)應(yīng)值的組件就會(huì)置頂在的頂部,舉例如果贛州這個(gè)的是,那你把的值設(shè)置成,那一打開贛州就會(huì)出現(xiàn)在頂部。
作者:Z帥來襲
來自:授權(quán)地址
轉(zhuǎn)自:微信小程序聯(lián)盟?
話不多說,先給你們看看核心數(shù)據(jù)和結(jié)構(gòu):
一、數(shù)據(jù):city的json array,letter的array
(city的json array里的首字母是我手工放置進(jìn)去的,你也可以通過for循環(huán)獲得city_en的第一個(gè)字符來自動(dòng)添加,但是為了贏得了性能我舍棄了靈活性)
二、布局左邊是scollview,右邊是sidebar,這個(gè)布局要是布不好,可以先去了解下“flex布局”
三、sidebar布局讓sidebar-item的id為當(dāng)前字母
四、設(shè)置sidebar距離頂部50px,設(shè)置sidebar的Item為固定20px,這個(gè)是必須的.sideBar { width: 5%; margin-top: 50px; } .sideBar-item { height: 20px; }五、在sidebar上添加事件bindtouchmove
這個(gè)事件可以獲取當(dāng)前手指觸摸的位置(主要是獲得距離屏幕頂部的pageY),下面是思路
var pageY = 在touchmove事件e中獲得pageY
var letterIndex = (pageY - sidebar距離頂部的50px)/sidebar item的高度20px
var letter = charArray[letterIndex];
實(shí)際代碼:
let letterIndex = (e.changedTouches["0"].pageY- 50) / 20; let letter = this.data.letterArray[letterIndex - 1];
在此,已經(jīng)獲得了你手指觸摸的letter了
六、通過scroll-view的一個(gè)屬性來讓字母置頂在scroll-view:scroll-to-view,可以把他的值設(shè)置為一個(gè)idscrollview的ABCD等索引的ID實(shí)際上就是ABCD本身,那么,把第四段落獲得的letter通過this.setData({toview:letter});
至此,觸摸sidebar就可以看到列表通過觸摸在變化。
七、后記過程:
最近微信小程序很火爆,我也嘗試著做個(gè)天氣軟件試試手,在做到城市列表的sidebar時(shí)難倒我了
首先了解scrollview的scroll-to-view屬性,把一個(gè)ID值賦給這個(gè)屬性,那么對(duì)應(yīng)ID值的組件就會(huì)置頂在scrollview的頂部,舉例:
如果“贛州”這個(gè)item的id是ganzhou,那你把scroll-to-view的值設(shè)置成ganzhou,那scrollview一打開贛州就會(huì)出現(xiàn)在頂部。
接著,研究微信小程序的“事件”,微信小程序的事件有以下這些
在一個(gè)個(gè)嘗試后,發(fā)現(xiàn)touchmove是最適合自己的,我原本想的是,
既然touchmove事件會(huì)返回touch位置的組件信息,那么我就可以根據(jù)組件獲得ID值,把ID的值再賦給scoll-to-view,
但是實(shí)際上不是我想的這樣,他不斷返回的都是我手指最開始觸摸位置的組件。
最后,我就琢磨讓sidebar和sidebar item的位置固定,通過計(jì)算獲得letter的位置。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/88101.html
摘要:七后記過程最近微信小程序很火爆,我也嘗試著做個(gè)天氣軟件試試手,在做到城市列表的時(shí)難倒我了首先了解的屬性,把一個(gè)值賦給這個(gè)屬性,那么對(duì)應(yīng)值的組件就會(huì)置頂在的頂部,舉例如果贛州這個(gè)的是,那你把的值設(shè)置成,那一打開贛州就會(huì)出現(xiàn)在頂部。 作者:Z帥來襲來自:授權(quán)地址轉(zhuǎn)自:微信小程序聯(lián)盟? 話不多說,先給你們看看核心數(shù)據(jù)和結(jié)構(gòu): 一、數(shù)據(jù): city的json array,letter的arra...
摘要:?jiǎn)栴}有朋友問微信小程序文件時(shí),會(huì)失敗分析事實(shí)上,微信小程序很多模塊都有不兼容現(xiàn)象。。。,被微信小程序初始化時(shí),指針為空,處理避開這類訪問。 問題 有朋友問, 微信小程序require (base64.js)文件時(shí),會(huì)失敗,,, 分析 事實(shí)上,微信小程序require很多JS模塊都有不兼容現(xiàn)象。。。先從base64.js這個(gè)模塊入手吧。調(diào)試出錯(cuò)點(diǎn): (function(global) ...
摘要:使用中文類的組件時(shí)候也就是需要呈現(xiàn)中文的組件,不限于組件是會(huì)自動(dòng)換行的,這時(shí)候需求在中強(qiáng)制不換行。在使用非中文組件時(shí)候就一切正常。至于為啥使用中文組件會(huì)有一部分留白,這個(gè)我不知道是個(gè)例還是,反正只需要用相對(duì)定位移一下就可以了。? 一、摘要 今天在使用scroll-view組件的時(shí)候發(fā)現(xiàn)結(jié)果跟預(yù)想的不一樣。其實(shí)也不是第一次用了,同樣的寫法卻出現(xiàn)了意料之外的效果,所以認(rèn)定是bug了。博主使用...
閱讀 4365·2021-11-24 10:24
閱讀 1409·2021-11-22 15:22
閱讀 2038·2021-11-17 09:33
閱讀 2429·2021-09-22 15:29
閱讀 515·2019-08-30 15:55
閱讀 1652·2019-08-29 18:42
閱讀 2731·2019-08-29 12:55
閱讀 1772·2019-08-26 13:55