react-踩坑记录——页面底部多出一倍高度的空白

Posted 2020-10-07 LLLLily

挂载slider组件后页面底部多出一倍高度的空白，如下：

slider组件内容⬇️：

class Slider extends Component{
  constructor(){
    super();
  }
  componentDidMount(){
    var index = 0;
    setInterval(function () {
        index++;
        if(index>3)
        {
          index=0;
          $(\'.list\').css(\'left\',\'0\');
        }
        $(\'.contain .list\').animate({\'left\':index*-375 },1000)
    },3000);
  }
  render(){
    return <div className="contain">
            <ul className="list">
              {
                this.props.slide_img.map((item,index)=>{
                  return <li key={index}><img className=\'list_img\' src={item.src} alt=\'图片加载失败\'></img></li>
                })
              }
            </ul>
          </div>
        }
}

css样式⬇️：

.contain{
    width: 400%;
    height: 295px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.list{
    width: 100%;
    height: 295px;
    position: absolute;
    left: 0px;
}
.list>li {
    float: left;
    width: 25%; 
    height: 100%;
}
.list_img {
    display: block;
    height: 100%;
    width: 100%;
} 

解决方法：针对根组件添加样式设置⬇️

#root{
    width: 100%;
    height: 100%;
    overflow: scroll;
}                  ／*即index.html文件中根组件div的id值为root*／
.contain{
    width: 400%;
    height: 295px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.list{
    width: 100%;
    height: 295px;
    position: absolute;
    left: 0px;
}
.list>li {
    float: left;
    width: 25%; 
    height: 100%;
}
.list_img {
    display: block;
    height: 100%;
    width: 100%;
} 

成功解决⬇️