React 原生实现新闻播报上下滚动效果

原文链接： https://juejin.im/post/5b16657ce51d4506b80e66a5

使用react实现新闻滚动播放效果，消息向上滚动

• CSS核心样式

.cosultation-wrap {
  // line-height: .17rem;
  background-color: white;
  border-top: 1px solid #e5e5e5;
  a {
    height: .32rem;
    display: flex;
    align-items: center;
    padding: 0 0 0 .15rem;
    width: 100%;
    box-sizing: border-box;
    .consulation-imgs {
      border-right: 1px solid #e5e5e5;
      width: .63rem;
      height: .17rem;
      padding-right: .08rem;
      img {
        width: 100%;
        height: 100%;
        vertical-align: baseline;
      }
    }
    .cosulation-news {
      position: relative;
      top: 0;
      color: #bebebe;
      margin-left: .08rem;
      font-size: .13rem;
      line-height: .32rem;
      flex-grow: 1;
      height: .32rem; 
      overflow: hidden;
      ul {
        position: absolute;
        top: 0;
        left: 0;
        .consulation-news-item {
          width: 100%;
          line-height: .32rem;
          height: .32rem; // 注意要加上高度，只给定line-height的话在手机端高度不一致
        }
      }
      .anim {
        transition: all 0.5s;
        margin-top: -0.32rem;
      }
    }
  }
}
复制代码

• jS核心代码

var React = require("react");
import "./style/Consultation.less";

var Consultation = React.createClass({
  getInitialState: function() {
    return { numbers: [{ id: "1", message: "定位成功后调整地图视野", robot: true }, { id: "2", message: "定位成功后调整地图视野", robot: false }, { id: "3", message: "定位成功后调整地图视野", robot: true }], animate: false };
  },

  componentDidMount: function() {
    setInterval(this.Dt, 2000);
  },

  Dt () {
    this.setState({ animate: true });   // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
    setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
      this.state.numbers.push(this.state.numbers[0]);  // 将数组的第一个元素添加到数组的
      this.state.numbers.shift();               //删除数组的第一个元素
      this.setState({ animate: false }); // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      this.forceUpdate();
    }, 1000)
  },

  render: function() {
    return <div className="cosultation-wrap">
        <a href="">
          <div className="consulation-imgs">
            <img src="/images/meitianzixun.png" alt />
          div>
          <div className="cosulation-news">
            <ul className={this.state.animate ? 'anim' : '' }>
                {this.state.numbers.map((item, index) => (
                <li className="consulation-news-item" key={item.id}>
                  {item.message}
                li>
                ))}
            ul>
          div>
        a>
      div>;
  }
});

export default Consultation;
复制代码

• 开发过程中遇到了一个小坑，就是li标签没有给定高度，只给定了line-height，在PC端谷歌浏览器是正常显示的，但在手机端显示不正常，给li标签加上高度就好了

效果图

（注：效果图是由 每天健康设计师设计出品）