一、 前端组件概述前端组件开发在现代前端开发中占据着至关重要的地位。随着互联网的快速发展，前端应用的规模和复杂性不断增加，传统的开发方式已经难以满足需求。前端组件开发应运而生，成为提高开发效率、代码可维护性和可复用性的关键手段。二、 组件化的重要性通过将复

 1让list组件占满屏幕2导入AutoSizer组件3通过render-props模式获取到AutoSizer组件暴露的width和height属性4设置List组件的width和height属性5设置城市根元素高度100%

1将当前定位城市添加到cityList中2将当前定位城市的索引添加到cityIndex中asyncgetCityList(){constres=awaitaxios.get('http://localhost:8080/area/c

importReactfrom'react'importaxiosfrom'axios'//导入axios//导入navBar组件import{NavBar,Icon}from'antd-mobile'import'./index.scss'import{getCurrentC

 1安装react-virtualized2在项目中导入样式组件3利用list组件完成importReactfrom'react'importaxiosfrom'axios'//导入axios//导入navBar组件import{NavBar,Icon

importReactfrom'react'importaxiosfrom'axios'//导入axios//导入navBar组件import{NavBar,Icon}from'antd-mobile'import'./index.scss'import{getCurrentC

使用页面渲染城市列表1讲获取到的citylist和cityindex为组件的状态数据2修改list组件的rowCount为index的索引3将rowRender函数添加到组件中以便在函数中获取到状态数据ci

1给list组件添加onrowaRendered配置项用于获取当前列表渲染的项目信息2通过参数satrtIndex获取到起始索引页3判断索引列是否相同importReactfrom'react'importaxiosf

1给索引列表绑定点击事件2在点击事件中通过index获取到当前项索引号3调用list组件的scrollToRow方法让list组件滚动到指定行4设置list的scrollToAlignment为start对准impo

importReactfrom'react'importaxiosfrom'axios'//导入axios//导入navBar组件import{NavBar,Icon,Toast}from'antd-mobile'import'./index.scss'import{getC