歌谣学习笔记-React-好客租房
# 歌谣学习笔记-React-好客租房
前端歌谣
喜欢得点赞 不喜欢得划走 没有做不了的事 只有不想做的人 歌谣的前端笔记小屋
展开
-
好客租房178-添加loading优化体验
html原创 2022-06-02 19:23:40 · 164 阅读 · 0 评论 -
好客租房177-createReact方法封装
html原创 2022-06-02 19:22:18 · 81 阅读 · 0 评论 -
好客租房176-获取房源数据优化
import React from 'react'// 导入axiosimport axios from 'axios'import { Link } from 'react-router-dom'// 导入封装好的 NavHeader 组件import NavHeader from '../../components/NavHeader'// 导入样式// import './index.scss'import styles from './index.module.css'...原创 2022-06-02 19:19:05 · 94 阅读 · 0 评论 -
好客租房175-获取当前小区被点击房源数据
import React from 'react'// 导入axiosimport axios from 'axios'import { Link } from 'react-router-dom'// 导入封装好的 NavHeader 组件import NavHeader from '../../components/NavHeader'// 导入样式// import './index.scss'import styles from './index.module.css'...原创 2022-06-02 19:18:37 · 74 阅读 · 0 评论 -
好客租房174-地图找房createReact方法绘制小区覆盖物
.map{ height: 100%; padding-top: 45px; }.container{ height: 100%;}.map :global(.am-navbar){ margin-top:-45px}/* 覆盖物样式: */.bubble { width: 70px; height: 70px; line-height: 1; display: inline-block; po...原创 2022-06-02 19:18:15 · 71 阅读 · 0 评论 -
好客租房173-地图找房createCircle方法
1复用之前创建覆盖物的代码逻辑在覆盖物的单击事件中 调用renderOverLays(id)方法import React from 'react'// 导入axiosimport axios from 'axios'// 导入封装好的 NavHeader 组件import NavHeader from '../../components/NavHeader'// 导入样式// import './index.scss'import styles from './inde..原创 2022-06-02 19:17:53 · 142 阅读 · 0 评论 -
好客租房172-地图找房createOverlays
//处理createOverlays 通过参数来决定调用什么方法import React from 'react'// 导入axiosimport axios from 'axios'// 导入封装好的 NavHeader 组件import NavHeader from '../../components/NavHeader'// 导入样式// import './index.scss'import styles from './index.module.css'// 解决..原创 2022-06-02 19:17:30 · 75 阅读 · 0 评论 -
好客租房171-地图找房renderOverlays
renderOverlays1接受改id参数 根据该id参数获取房源2调用getTypeAndZoom方法获取地图缩放级别 覆盖物类别import React from 'react'// 导入axiosimport axios from 'axios'// 导入封装好的 NavHeader 组件import NavHeader from '../../components/NavHeader'// 导入样式// import './index.scss'imp..原创 2022-06-01 09:20:16 · 85 阅读 · 0 评论 -
好客租房170-地图找房的一个封装流程
react原创 2022-06-01 09:19:57 · 72 阅读 · 0 评论 -
好客租房169-渲染所有区的覆盖物
import React from 'react'// 导入axiosimport axios from 'axios'// 导入封装好的 NavHeader 组件import NavHeader from '../../components/NavHeader'// 导入样式// import './index.scss'import styles from './index.module.css'// 解决脚手架中全局变量访问的问题const BMapGL = win...原创 2022-06-01 09:19:23 · 67 阅读 · 0 评论 -
好客租房168-地图找房分析
地图找房原创 2022-06-01 09:19:05 · 113 阅读 · 0 评论 -
好客租房167-绘制房源覆盖物
import React from 'react'// 导入样式// import './index.scss'import styles from './index.module.scss'import NavHeader from '../../components/NavHeader'// 覆盖物样式const labelStyle = { cursor: 'pointer', border: '0px solid rgb(255, 0, 0)', ...原创 2022-06-01 09:18:12 · 82 阅读 · 0 评论 -
好客租房166-根据定位获取当前城市
1实现步骤打开百度文字标签demo2创建label对象3调用setStyle样式4在map对象上调用addOverlay()方法 将文本覆盖物覆盖上import React from 'react'// 导入样式// import './index.scss'import styles from './index.module.scss'import NavHeader from '../../components/NavHeader'export defaul..原创 2022-06-01 09:17:52 · 145 阅读 · 0 评论 -
好客租房165-根据定位获取当前城市
1.4根据定位展示当前城市1获取当前定位城市2使用地址解析器获取城市坐标3调用centerAndZoom4在地图中添加比例尺和平移缩放import React from 'react'// 导入样式// import './index.scss'import styles from "./index.module.scss"import NavHeader from '../../components/NavHeader';export default class..原创 2022-06-01 09:17:32 · 122 阅读 · 0 评论 -
好客租房164-地图找房导航栏样式调整
import React from 'react'// 导入样式// import './index.scss'import styles from "./index.module.scss"import NavHeader from '../../components/NavHeader';export default class Map extends React.Component { componentDidMount() { var map = new wind...原创 2022-06-01 09:17:13 · 85 阅读 · 0 评论 -
好客租房163-css Module的应用
1使用css Modules修改NavHeader样式2在样式文件中修改当前组件的样式3对于组件库中已经有的全局样式 (比如:am-navber-title)import React from 'react'import { NavBar } from 'antd-mobile'// 导入 withRouter 高阶组件import { withRouter } from 'react-router-dom'// 导入 props 校验的包import PropType..原创 2022-06-01 09:16:54 · 60 阅读 · 0 评论 -
好客租房162-css modules在项目中的应用
import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon, Toast } from 'antd-mobile'import './index.scss'import { getCurrentCity } from '../../utils'//导入react-virtualized组件import { List, AutoSizer } from '...原创 2022-06-01 09:16:32 · 73 阅读 · 0 评论 -
好客租房161-css modules的说明
css modules通过对css类名重命名 保证每个类名的唯一性 从而避免样式冲突的问题换句话:所有类名就具有局部作用域 只能当前组件内部生效webpack的css-loader原因原创 2022-05-31 09:47:41 · 59 阅读 · 0 评论 -
好客租房160-css-in-js的说明
1.3组件间样式覆盖问题1css in jscss in js:是使用javascript编写css的统称 用来解决css样式冲突推荐使用:css modules原创 2022-05-31 09:47:20 · 78 阅读 · 0 评论 -
好客租房159-组件内样式覆盖问题的说明
1cityList组件的样式 会影响Map组件的样式2在配置路由时候 cityList和map组件都被导入到项目中 那么组件的样式也被导入到项目之中了 如果组件之间样式名称相同 那么一个组件中的样式就会在另一个组件中中生效从而造成组件样式之间相互覆盖的问题3只要导入了组件 不管组件中有没有显示 组件的样式就会生效...原创 2022-05-31 09:47:04 · 58 阅读 · 0 评论 -
好客租房158-在城市界面使用navbar
import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon, Toast } from 'antd-mobile'import './index.scss'import { getCurrentCity } from '../../utils'//导入react-virtualized组件import { List, AutoSizer } from 'reac...原创 2022-05-31 09:46:46 · 97 阅读 · 0 评论 -
好客租房157-封装顶部导航栏组件(4添加props校验)
添加props校验导入propTypesimport React from 'react'import { NavBar } from 'antd-mobile'// 导入 withRouter 高阶组件import { withRouter } from 'react-router-dom'// 导入 props 校验的包import PropTypes from 'prop-types'import "./index.scss"// 添加props校验NavHe..原创 2022-05-31 09:46:28 · 72 阅读 · 0 评论 -
好客租房156-封装顶部导航栏组件(3功能处理withRouter)
import React from 'react'import { NavBar } from 'antd-mobile'// 导入 withRouter 高阶组件import { withRouter } from 'react-router-dom'import "./index.scss" function NavHeader({children,history,onLeftClick}) { // 默认点击行为 const defaultHandler = () => ...原创 2022-05-31 09:46:09 · 71 阅读 · 0 评论 -
好客租房155-封装顶部导航栏组件(2样式调整)
.navbar { // 组件应该保持默认的基本样式,对于页面单独需要的样式,在页面中单独指定就可以了 // margin-top: -45px; color: #333; background-color: #f6f5f6; .am-navbar-title { color: #333; } }运行结果...原创 2022-05-31 09:45:51 · 60 阅读 · 0 评论 -
好客租房154-封装顶部导航栏组件(1顶部导航栏)
1封装NavHeader组件实现城市选择 地图找房页面的复用2在component目录中创建NavHeader/index.jsimport React from 'react'import { NavBar } from 'antd-mobile'export default function NavHeader({children}) { return ( <NavBar className="navbar" mode="light" icon={<..原创 2022-05-31 09:45:15 · 54 阅读 · 0 评论 -
好客租房153-地图找房模块功能分析
原创 2022-05-31 09:44:54 · 127 阅读 · 0 评论 -
好客租房149-渲染右侧索引列表(点击索引指定该索引城市)
1给索引列表绑定点击事件2在点击事件中 通过index获取到当前项索引号3调用list组件的scrollToRow方法 让list组件滚动到指定行4设置list的scrollToAlignment为start对准import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from 'antd-mobile'import './index.scss'..原创 2022-05-31 09:42:09 · 113 阅读 · 0 评论 -
好客租房152-好客租房web中学习
原创 2022-05-30 09:30:11 · 150 阅读 · 0 评论 -
好客租房151-好客租房web上总结
1目录的总结2页面的跳转组件3封装了一些函数原创 2022-05-30 09:29:38 · 96 阅读 · 0 评论 -
好客租房150-切换城市
1给城市列表项绑定点击事件2判断是不是北上广深数据3有房源数据 存到本地缓存中4没有则返回无房源数据import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon,Toast } from 'antd-mobile'import './index.scss'import { getCurrentCity } from '../../utils'//导入..原创 2022-05-30 09:28:59 · 131 阅读 · 0 评论 -
好客租房148-渲染右侧索引列表(滚动城市列表高亮)
1给list组件添加onrowaRendered配置项 用于获取当前列表渲染的项目信息2通过参数satrtIndex获取到 起始索引页3判断索引列是否相同import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from 'antd-mobile'import './index.scss'import { getCurrentCity } from..原创 2022-05-30 09:31:16 · 104 阅读 · 0 评论 -
好客租房147-渲染(渲染右侧索引列表)
1封装renderCityIndex方法 用来渲染城市列表2在方法中 获取到索引数组cityIndex 遍历cityIndex 渲染索引列表3将缩影hot替换为热4在state中状态添加状态avtiveIndex5判断高亮条件import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from 'antd-mobile'import './in..原创 2022-05-30 09:25:50 · 63 阅读 · 0 评论 -
好客租房146-渲染(展示索引下每一行的高度)
import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from 'antd-mobile'import './index.scss'import { getCurrentCity } from '../../utils'//导入react-virtualized组件import { List, AutoSizer } from 'react-virtu...原创 2022-05-30 09:24:34 · 52 阅读 · 0 评论 -
好客租房145-渲染城市列表(展示城市索引)
import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from 'antd-mobile'import './index.scss'import { getCurrentCity } from '../../utils'//导入react-virtualized组件import { List, AutoSizer } from 'react-virtu...原创 2022-05-30 09:23:51 · 214 阅读 · 0 评论 -
好客租房144-渲染城市列表
使用页面渲染城市列表1讲获取到的citylist和cityindex为组件的状态数据2修改list组件的rowCount为index的索引3将rowRender函数 添加到组件中 以便在函数中获取到状态数据citylist和cityindex4修改list组件的rowRender组件方法5修改list组件的rowHeight为函数 动态计算每一行的高度 因为每一行高度都不相同import React from 'react'import axios from 'axios'..原创 2022-05-30 09:30:53 · 177 阅读 · 0 评论 -
好客租房143-react-virtualized3让list组件占满整个屏幕
1让list组件占满屏幕2导入AutoSizer组件3通过render-props模式 获取到AutoSizer组件暴露的width和height属性4设置List组件的width和height属性5设置城市根元素高度100% 让组件占满整个页面6调整样式 不要出现全局滚动条import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from .原创 2022-05-29 21:02:52 · 150 阅读 · 0 评论 -
好客租房142-react-virtualized2基本使用
1安装react-virtualized2在项目中导入样式组件3利用list组件完成import React from 'react'import axios from 'axios'//导入axios//导入navBar组件import { NavBar, Icon } from 'antd-mobile'import './index.scss'import { getCurrentCity } from '../../utils'//导入react-virtualized.原创 2022-05-30 09:19:10 · 122 阅读 · 0 评论 -
好客租房141-react-virtualized1概述
原创 2022-05-29 21:01:38 · 89 阅读 · 0 评论 -
好客租房140-长列表性能优化(可视区域渲染)
1可视区域渲染(react-virtualized)2适用于一次性展示大量的数据原创 2022-05-29 21:00:58 · 81 阅读 · 0 评论 -
好客租房139-长列表性能优化(懒渲染)
1常见的长列表优化方案 常见于移动端2原理:每次渲染一部分 渲染的数据即将滚动完 在渲染下面的数据3优点 每次渲染一部分数据 速度快4数据量打的时候 页面上存在大量dom节点 占用树村过多5使用场景 数据量不打的情况下 具体看页面的复杂程度...原创 2022-05-29 21:03:43 · 132 阅读 · 0 评论