城市索引

src/pages/CityList/index.css

@@ -10,3 +10,29 @@ ul{
     list-style: none;
     margin: 0;
 }
+
+.city-index {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 5px;
+  z-index: 1;
+  height: 90%;
+  box-sizing: border-box;
+  padding-top: 20px;
+  text-align: center;
+}
+.city-index .city-index-item {
+    flex: 1;
+  }
+
+.city-index .index-active {
+    color: #fff;
+    background-color: #21b97a;
+    border-radius: 100%;
+    display: inline-block;
+    font-size: 12px;
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+  }

src/pages/CityList/index.js

@@ -37,6 +37,7 @@ const formatCityData = (list) => {
     }
 }
 
+const HOUSE_CITY= ['北京','上海','广州','深圳']
 // const right = (
 //     <div style={{ fontSize: 24 }}>
 //         <Space style={{ '--gap': '16px' }}>
@@ -79,7 +80,7 @@ export default class CityList extends React.Component {
             cityIndex: [],
             activeIndex: 0
         }
-        const cityListComponent = React.createRef()
+        this.cityListComponent = React.createRef()
     }
     async componentDidMount() {
         await this.getCityList()
@@ -100,7 +101,6 @@ export default class CityList extends React.Component {
         cityList['#'] = [curCity]
         cityIndex.unshift('#')
 
-        console.info('shezhi zhuangtai')
         this.setState({
             cityList,
             cityIndex
@@ -127,7 +127,7 @@ export default class CityList extends React.Component {
                 <div className="title">{formatCityIndex(letter)}</div>
                 {
                     this.state.cityList[letter].map(item => (
-                        <div className="name" key={item.value}>{item.label}</div>
+                        <div className="name" key={item.value} onClick={()=>this.changeCity(item)}>{item.label}</div>
                     ))
                 }
             </div>
@@ -139,11 +139,11 @@ export default class CityList extends React.Component {
 
     renderCityIndex() {
         const { cityIndex, activeIndex } = this.state
-        return cityIndex.map((item, index) => {
+        return cityIndex.map((item, index) => (
             <li className="city-index-item" key={item} onClick={()=>{this.cityListComponent.current.scrollToRow(index)}}>
                 <span className={activeIndex === index ? "index-active" : ''}>{item === 'hot' ? '热' : item.toUpperCase()}</span>
             </li>
-        })
+        ))
     }
     // 用户获取list组件渲染行数据
     onRowsRendered=({startIndex})=>{
@@ -153,6 +153,15 @@ export default class CityList extends React.Component {
             })
         } 
     }
+    changeCity({label,value}){
+        if(HOUSE_CITY.indexOf(label)>-1){
+            localStorage.setItem('hkzf_city',JSON.stringify({label,value}))
+            // 返回上一个页面
+            
+        }else{
+            Toast.show('该城市暂无房源数据') 
+        }
+    }
 
     render() {
         return <div className="citylist"><NavBar className="citylist-navbar" back='返回' onBack={back}>城市选择</NavBar>