随笔分类 - 前端歌谣歌谣-学习篇React-好客租房笔记
摘要：1可视区域渲染（react-virtualized） 2适用于一次性展示大量的数据
阅读全文
摘要：1让list组件占满屏幕 2导入AutoSizer组件 3通过render-props模式 获取到AutoSizer组件暴露的width和height属性 4设置List组件的width和height属性 5设置城市根元素高度100% 让组件占满整个页面 6调整样式 不要出现全局滚动条 import
阅读全文
摘要：1如何获取到定位城市的信息 2获取定位城市的代码 封装成函数 直接调用改方法就行 3判断localstorage是否有这个城市 4如果没有就 通过首页中获取定位城市的代码获取 存储到本地中 返回该城市数据 // 1如何获取到定位城市的信息 // 2获取定位城市的代码 封装成函数 直接调用改方法就行
阅读全文
摘要：1常见的长列表优化方案 常见于移动端 2原理:每次渲染一部分 渲染的数据即将滚动完 在渲染下面的数据 3优点 每次渲染一部分数据 速度快 4数据量打的时候 页面上存在大量dom节点 占用树村过多 5使用场景 数据量不打的情况下 具体看页面的复杂程度
阅读全文
摘要：1安装react-virtualized 2在项目中导入样式组件 3利用list组件完成 import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from '
阅读全文
摘要：1将当前定位城市添加到cityList中 2将当前定位城市的索引添加到cityIndex中 async getCityList() { const res = await axios.get('http://localhost:8080/area/city?level=1') console.log
阅读全文
摘要：import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import './index.scss' import { g
阅读全文
摘要：import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon } from 'antd-mobile' import './index.scss' import { g
阅读全文
摘要：1封装renderCityIndex方法 用来渲染城市列表 2在方法中 获取到索引数组cityIndex 遍历cityIndex 渲染索引列表 3将缩影hot替换为热 4在state中状态添加状态avtiveIndex 5判断高亮条件 import React from 'react' import
阅读全文
摘要：1给城市列表项绑定点击事件 2判断是不是北上广深数据 3有房源数据 存到本地缓存中 4没有则返回无房源数据 import React from 'react' import axios from 'axios' //导入axios //导入navBar组件 import { NavBar, Icon
阅读全文
摘要：1目录的总结 2页面的跳转组件 3封装了一些函数
阅读全文
摘要：使用页面渲染城市列表 1讲获取到的citylist和cityindex为组件的状态数据 2修改list组件的rowCount为index的索引 3将rowRender函数 添加到组件中 以便在函数中获取到状态数据citylist和cityindex 4修改list组件的rowRender组件方法 5
阅读全文
摘要：1给list组件添加onrowaRendered配置项 用于获取当前列表渲染的项目信息 2通过参数satrtIndex获取到 起始索引页 3判断索引列是否相同 import React from 'react' import axios from 'axios' //导入axios //导入navB
阅读全文
摘要：1打开ant-moblie组件库的carousel 2选择基本 点击显示远吗 3开始拷贝代码 import React from "react"; //留白 import { Carousel } from 'antd-mobile'; class Index extends React.Compo
阅读全文
摘要：1安装axios yarn add axios 2在index组件中引入axios 3在state中加入swiper数据 4进行数据处理 5在函数中调用方法 6渲染轮播图 import React from "react"; import axios from "axios" //留白 import
阅读全文
摘要：import React from "react"; import axios from "axios" //留白 import { Carousel,Flex } from 'antd-mobile'; import Nav1 from '../../assets/images/nav-1.png
阅读全文
摘要：import React from "react"; import axios from "axios" //留白 import { Carousel,Flex } from 'antd-mobile'; import Nav1 from '../../assets/images/nav-1.png
阅读全文
摘要：第一个 数据加载完成加载一个true import React from "react"; import axios from "axios" //留白 import { Carousel,Flex } from 'antd-mobile'; import Nav1 from '../../asse
阅读全文
