使用react实现新闻滚动播放效果,消息向上滚动
.cosultation-wrap {
// line-height: .17rem;
background-color: white;
border-top: 1px solid
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
width: .63rem;
height: .17rem;
padding-right: .08rem;
img {
width: 100%;
height: 100%;
vertical-align: baseline;
}
}
.cosulation-news {
position: relative;
top: 0;
color:
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;
}
}
}
}
复制代码
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 });
setTimeout(() => {
this.state.numbers.push(this.state.numbers[0]);
this.state.numbers.shift();
this.setState({ animate: false });
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标签加上高度就好了
效果图
(注:效果图是由
每天健康
设计师设计出品)