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 0;
  height:50px;
  line-height: 50px;
}
.ovh{
  overflow:hidden;
}
.font28{
  font-size:28px;
}
.relative{
  position:relative;
}
.scroll{
  color:#fff;
  width:100%;
  height:40px;
}
.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
}

this.state = ({
      length:0,
      windowWidth:0,
      notice:'哈哈哈哈哈哈，我是滾動的公告,我是滾動的公告!',
      marqueePace: 1,//滾動速度
      marqueeDistance: 10,//初始滾動距離
      size: 12,
      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);

  }