城市選擇路由界面配置
效果:
1.git創(chuàng)建分支city-router
2.寫好樣式:頭部以及搜索框徘禁。(分別創(chuàng)建兩個分支city-router\city-search)
3.列表開發(fā):
創(chuàng)建分支city-list,
注意:此頁面稍后會使用better-scroll進行頁面滾動操作集惋,所以當前要在最外層盒子list中設置為絕對定位并且超出隱藏壹置,使其不能滾動。
使用better-scroll滑動下拉效果以及進行字母表布局
1.下載better-scroll 官網(wǎng):https://github.com/websky219/better-scroll
npm install better-scroll --save
在生命周期函數(shù)mounted 中初始化better-scroll
2.右側字母表布局
<1? 創(chuàng)建單獨的組件Alphabet.vue
<2? 使用絕對定位定位到側邊表谊,使用flex布局使其垂直居中钞护。
3.動態(tài)渲染數(shù)據(jù)
<1? 創(chuàng)建city-ajax分支
<2? 動態(tài)渲染數(shù)據(jù)步驟
1.在父組件引入axios
2.data中初始化要返回的數(shù)據(jù)
3.在methods中定義好ajax獲取數(shù)據(jù)的操作
4.在掛載節(jié)點之后進行ajax獲取數(shù)據(jù)操作
5.父組件節(jié)點上自定義屬性傳輸值
6.子組件props接受值并定義數(shù)據(jù)類型
7.渲染數(shù)據(jù)
注意:雙層循環(huán)渲染數(shù)據(jù),數(shù)據(jù)為對象類型,樣式為key:value的形式爆办。
例子說明:
父組件:
子組件:
4.點擊右側字母表难咕,左側列表聯(lián)動
<1? 創(chuàng)建city-components分支,在分支上面實現(xiàn)城市列表組件通信距辆。
<2 ?