成果展示
最後的成果就是下面所展示的內容，因為gif圖沒有做，只能截圖所展示，接下來，會帶著大家一步一步的完成下面功能，腳手架搭建和node安裝在本次案例不會講解，如果了解，可以在我的找到有詳細介紹
準備工作：
引入axios外掛程式，呼叫better-scroll第三方外掛程式，本地json檔案，可以參考目錄中的city.json,有條件的也可以自己去扒
功能分析
1.獲取json資料展示城市列表 。
2.側邊字母定位滾動到相應的位置。
3.實現搜尋城市
接下來我們開始對元件進行劃分：本次案例中，總共劃分為五個元件，下面就是元件的劃分圖
建立city元件，通過父元件獲取資料，傳遞給子元件
//頭部city元件//搜尋
//城市列表
//a-z
把得到的資料分次傳遞個對應的子元件，這樣有利於**優化，不用頻繁的請資料
export default建立頭部元件，, //
城市列表
hotcity:, //
熱門城市
letter: '' //
a-z}
},components: ,
methods:,
getcityinfosucc(res)}},
mounted ()
}
城市選擇建立搜尋元件頁面，接受父元件傳遞的資料，引入better-scroll第三方外掛程式，實現列表滾動
建立城市列表元件，引入better-scroll外掛程式，實現列表滾動，通過watch監聽letter，實現字母與城市列表滾動
熱門城市
}v-for="(item,key) in list":ref="key":key="key">
}建立字母元件，點選字母，左邊列表城市想對應，通過this.$emit事件，子元件在觸發的事件傳遞給父元件，父元件通過子元件傳遞的事件，在傳遞給list元件，
:ref="item"@click="handeclick"@touchstart="handletouchstart"@touchmove="handletouchmove"@touchend= "handletouchend"v-for="item of letter":key="item">}
ReactNative實現城市選擇列表
使用rn開發了一段時間,最近遇到了乙個比較棘手的問題,就是用react寫個城市選擇列表,當然這個如果用android原生來寫,網上的例子數不勝數,隨便就能找到,但是react卻很少,也沒有乙個和我這個需求相匹配的,所以就只能自己動手擼乙個出來咯.這個城市列表和其他的有點區別 1,有當前定位城市 2,...
jquery實現 城市選擇框
jquery實現 城市選擇框。城市單選框 1 引入js和css 2 指定輸入框 function 3 輸入框 城市 4 修改city.js檔案 在檔案最後 function else ajax cache false,預設為true。設定為 false 將不會從瀏覽器快取中載入請求資訊。dataty...
vue實現虛擬列表
當資料量較大 此處設定為10w 而且要用列表的形式展現給使用者,如果我們不做處理的話,在瀏覽器中渲染10w dom節點,是極其耗費時間的,那我的macbook air舉例,10w條資料渲染出來到能看到頁面,需要13秒多 實際應該是10秒左右 如果是使用者的話肯定是不會等乙個網頁十幾秒的 我們可以用虛...