react项目：仿airbnb首页（三）部分頁面搭建

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情 动态展示footer

动态展示footer需要传入name属性

如果什么属性都不传就显示黑色的

显示不同的颜色：通过name三元运算符将color作为属性传入到style ；在style中通过props接收

tab的滚动效果-ScrollView组件的封装

滚动效果用transform

scroll的内容由外界决定可以用插槽 在scroolView中{props.children}展示

点击右边的按钮就滚动：

记录索引：posIndex

每次滚动1个 newIndex = posIndex + 1

拿到newIndex对应的元素 newEl.offsetLeft

offsetLeft是元素左上角和最近的有定位的父级元素的距离 注意：父级元素要设置定位

滚动动画

 scrollContentRef.current.style.transform = `
        translate(-${newOffsetLeft}px)
    `;

当右边没有东西就不显示右边的按钮

showRight = totalDistance > newOffsetLeft

数据更新的时候不刷新页面，只要记录数据，就使用useRef，useRef在每次组件渲染后返回的都是一样的值

Plus房源

在services home发送网络请求

在store获取数据

在ccpns中封装HomeSectionV3组件，在view的index中拿到数据 使用HomeSectionV3组件，HomeSectionV3组件中展示数据

页面跳转

const navigate = useNavigate();
  function moreClickHandle() {
    navigate("/entire");
  }