备份

src/pages/CityList/index.js

@@ -71,14 +71,20 @@ const back = () => { }
 //     );
 // }
 export default class CityList extends React.Component {
-    state = {
-        cityList: {},
-        cityIndex: [],
-        activeIndex: 0
+
+    constructor(props){
+        super(props)
+        this.state = {
+            cityList: {},
+            cityIndex: [],
+            activeIndex: 0
+        }
+        const cityListComponent = React.createRef()
     }
-    componentDidMount() {
-        this.getCityList()
-        console.info("componentDidMount")
+    async componentDidMount() {
+        await this.getCityList()
+        //提前计算list高度
+        this.cityListComponent.current.measureAllRows()
     }
     async getCityList() {
         const res = await axios.get('http://localhost:8080/area/city?level=1')
@@ -134,11 +140,19 @@ export default class CityList extends React.Component {
     renderCityIndex() {
         const { cityIndex, activeIndex } = this.state
         return cityIndex.map((item, index) => {
-            <li className="city-index-item" key={item}>
+            <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})=>{
+        if(this.state.activeIndex!=startIndex){
+            this.setState({
+                activeIndex:startIndex
+            })
+        }
+    }
 
     render() {
         return <div className="citylist"><NavBar className="citylist-navbar" back='返回' onBack={back}>城市选择</NavBar>
@@ -147,10 +161,12 @@ export default class CityList extends React.Component {
                     <List
                         width={width}
                         height={height}
+                        ref={this.cityListComponent}
                         rowCount={this.state.cityIndex.length}
                         rowHeight={this.getRowHeight}
                         rowRenderer={this.rowRenderer}
-                    />
+                        onRowsRendered={this.onRowsRendered}
+                        scrollToAlignment="start"                    />
                 )}
             </AutoSizer>
             <ul className="city-index">{this.renderCityIndex()}</ul>