码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-20 14:38:46      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:记录   oat   interval   render   hid   fun   com   mount   alt   

挂载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%;
} 

成功解决??

技术分享

 

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

标签:记录   oat   interval   render   hid   fun   com   mount   alt   

原文地址:http://www.cnblogs.com/LLLLily/p/7560454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!