Taro -- 文字左右滚动公告效果

文字左右滚动公告效果

设置公告的左移距离，不断减小，当左移距离大于公告长度（即公告已移出屏幕），重新循环。

 <View className='scroll-wrap'>
    <View className='scroll ovh font28 relative'>
       <View className="marquee_text" style={{left: this.state.marqueeDistance + 'px'}}>
          {this.state.notice}
       </View>
    </View>
 </View>

.scroll-wrap{
  background:#FF3766;
  padding:10px 70px 10px ;
  height:50px;
  line-height: 50px;
}
.ovh{
  overflow:hidden;
}
.font28{
  font-size:28px;
}
.relative{
  position:relative;
}
.scroll{
  color:#fff;
  width:%;
  height:40px;
}
.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: ;
}

this.state = ({
      length:,
      windowWidth:,
      notice:'哈哈哈哈哈哈，我是滚动的公告,我是滚动的公告!',
      marqueePace: ,//滚动速度
      marqueeDistance: ,//初始滚动距离
      size: ,
      countTime: ''
})

  componentWillMount() {

    let length = this.state.notice.length * this.state.size;//文字长度

    let windowWidth = Taro.getSystemInfoSync().windowWidth; // 屏幕宽度

    console.log(windowWidth);

    this.setState({

      length:length,

      windowWidth:windowWidth,

      marqueeDistance: windowWidth

    },() => {

      this.run();

    })

  }

 

  run = (e) => {

      let countTime = setInterval(() => {

        if(-this.state.marqueeDistance < this.state.length){

          let newMarquee = this.state.marqueeDistance - this.state.marqueePace;

          this.setState({

            marqueeDistance : newMarquee

          })

        }else{

          this.setState({

            marqueeDistance:this.state.windowWidth

          })

          this.run();

          clearInterval(countTime);

        }

      }, 20);

  }