React实现长列表

最近学习React，做的小练习
功能：
1，都会列表展示
2，利用索引快速定位相应的都会列表部分，滚动都会列表，索引跟随定位
3，点击都会名称切换都会
  

代码如下：

1. import React from "react";
2. import "./index.scss";
3. import { useNavigate } from "react-router-dom";
4. import { Toast } from "antd-mobile";
5. import request from "../../request";
6. import { getCurrenCity } from "../../utils/index";
8. import { List, AutoSizer } from "react-virtualized";
10. import NavHeader from "../../components/NavHeader/index";
12. export default function Citylist() {
13.   // 索引（A,B……）的高度
14.   const TITLE_HEIGHT = 36;
15.   // 每个城市名称的高度
16.   const NAME_HEIGHT = 50;
18.   // 有房源的城市
19.   const HOUSE_CITY = ["北京", "上海", "广州", "深圳"];
21.   const navigate = useNavigate();
22.   let hotCity = [];
23.   const cityListComponent = React.useRef();
24.   const [currentIndex, setCurrentIndex] = React.useState(0);
25.   const [cityList, setCityList] = React.useState({});
26.   const [cityIndex, setCityIndex] = React.useState([]);
28.   // 初始化
29.   React.useEffect(() => {
30.     getCityList();
31.     getHotCityList();
33.     setTimeout(() => {
34.       cityListComponent.current.measureAllRows();
35.     }, 1000);
36.   }, []);
38.   // 获取城市列表数据
39.   const getCityList = () => {
40.     const params = { params: { level: 1 } };
41.     request.get("/area/city", params).then((res) => {
42.       if (res.body.length > 0) {
43.         // console.log("城市列表数据",res.body)
44.         const { cityList, cityIndex } = formatData(res.body);
45.         // console.log("数据格式化=》", cityList, cityIndex);
46.         setCityIndex(cityIndex);
47.         setCityList(cityList);
48.       }
49.     });
50.   };
52.   // 获取热门城市数据
53.   const getHotCityList = () => {
54.     request.get("/area/hot").then((res) => {
55.       if (res.body.length > 0) {
56.         // console.log("热门城市=》", res.body);
57.         hotCity = res.body;
58.       }
59.     });
60.   };
62.   // 格式化城市列表数据
63.   const formatData = (list) => {
64.     let cityList = {};
65.     let cityIndex = [];
67.     // 渲染城市列表的数据格式为：
68.     // {a:[{},{}],b:[],……}
69.     list.forEach((item) => {
70.       const key = item.short.substr(0, 1);
71.       if (cityList[key]) {
72.         cityList[key].push(item);
73.       } else {
74.         cityList[key] = [item];
75.       }
76.     });
78.     // 渲染右侧索引的数据格式
79.     // ['a','b',……]
80.     cityIndex = Object.keys(cityList).sort();
82.     // 添加热门城市
83.     cityList["hot"] = hotCity;
84.     cityIndex.unshift("hot");
86.     // 添加当前定位城市
87.     getCurrenCity().then((data) => {
88.       cityList["#"] = [data];
89.       cityIndex.unshift("#");
90.     });
91.     return { cityList, cityIndex };
92.   };
94.   // 格式化城市索引
95.   const formatCityIndex = (letter) => {
96.     switch (letter) {
97.       case "#":
98.         return "当前定位";
99.       case "hot":
100.         return "热门城市";
101.       default:
102.         return letter.toUpperCase(); // A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
103.     }
104.   };
106.   // 计算每行的高度
107.   const getRowHeight = ({ index }) => {
108.     const list = cityList[cityIndex[index]];
109.     return list.length * NAME_HEIGHT + TITLE_HEIGHT;
110.   };
112.   // 渲染索引
113.   const renderIndex = () => {
114.     return cityIndex.map((item, index) => (
115.       <li
116.         key={item}
117.         className="city-index-item"
118.         onClick={() => {
119.           setCurrentIndex(index);
120.           return cityListComponent.current.scrollToRow(index);
121.         }}
122.       >
123.         <span className={currentIndex === index ? "index-acitve" : ""}>
124.           {item === "hot" ? "热" : item.toUpperCase()}
125.         </span>
126.       </li>
127.     ));
128.   };
130.   const rowRenderer = ({ key, index, style }) => {
131.     const letter = cityIndex[index];
132.     return (
133.       <div key={key} style={style} className="city">
134.         <div className="title">{formatCityIndex(letter)}</div>
135.         {cityList[letter].map((item) => {
136.           return (
137.             <div
138.               key={item.value}
139.               className="name"
140.               onClick={() => changeItem(item)}
141.             >
142.               {item.label}
143.             </div>
144.           );
145.         })}
146.       </div>
147.     );
148.   };
150.   const changeItem = ({ label, value }) => {
151.     if (HOUSE_CITY.includes(label)) {
152.       localStorage.setItem("hkzf_city", JSON.stringify({ label, value }));
153.       navigate("/home");
154.     } else {
155.       Toast.show({
156.         content: "暂无房源信息",
157.       });
158.     }
159.   };
160.   const onRowsRendered = ({ startIndex }) => {
161.     if (startIndex !== currentIndex) {
162.       setCurrentIndex(startIndex);
163.     }
164.   };
166.   return (
167.     <div className="cityList_main">
168.       <NavHeader title="城市选择" />
170.       <AutoSizer>
171.         {({ height, width }) => (
172.           <List
173.             ref={cityListComponent}
174.             width={width}
175.             height={height}
176.             rowCount={cityIndex.length}
177.             rowHeight={getRowHeight}
178.             rowRenderer={rowRenderer}
179.             onRowsRendered={onRowsRendered}
180.             scrollToAlignment="start"
181.           />
182.         )}
183.       </AutoSizer>
185.       <ul className="city-index">{renderIndex()}</ul>
186.     </div>
187.   );
188. }

复制代码

  相干视频：https://www.bilibili.com/video/BV1gh411U7JD?spm_id_from=333.788.videopod.episodes&vd_source=2f48f471bbeafdcd207f29dadcc97a5d&p=131

gitee地址：https://gitee.com/abcdfdewrw/react_hkzf

第三方组件：react-virtualized长列表

难点：数据格式处置惩罚，react-virtualized组件在项目中的利用

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。