单行文字横向循环滚动

单行文字循环滚动

已把该功能以组件的形式抽离出来，根据需求可以更改滚动的字体，背景颜色，以及字体颜色
注：因为这是一个用Taro写的小程序，大家看的时候可以忽略里面引入的东西以及标签，着重看render里面的代码

动画实现：

import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import Taro from '@tarojs/taro'
import QyIcon from '@/components/qy-icon'
import styles from './index.scss'

@connect(({ app }) => ({ app }))
export default class ShufflingAnnouncement extends Taro.Component {
    static defaultProps = {
        content: '默认轮播公告内容打不打吧大的啊了发生',
        bgc: 'red',
        col: '#000000'
    }

    render() {
        const { content, bgc, col } = this.props
        return (
            <View className={styles['marquee']} style={{ backgroundColor: `${bgc}` }}>
                <QyIcon name='notice' color={col} size='40rpx' />
                <View className={styles['wai']}>
                    <View className={styles['text']} style={{ color: `${col}` }}>{content}</View>
                </View>
            </View>
        )
    }
}

css

.marquee {
  display: flex;
  align-items: center;
  width: 670px;
  height: 60px;
  margin: 0 auto;
  padding-left: 20px;
  .wai {
    width: 630px;
    overflow: hidden;
    padding-left: 20px;
    margin-left: 20px;
    .text {
      white-space: nowrap;
      display: inline-block;
      animation: wordsLoop 10s linear infinite normal;
    }
    @keyframes wordsLoop {
      0% {
        transform: translateX(500px);
        -webkit-transform: translateX(500px);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
  }
}

使用

import ShufflingAnnouncement from '' //根据自己存放的路径引入
render(){
	return (
		<ShufflingAnnouncement bgc={'blue'} col={'white'} />
	)
}

结束语

该功能还可以完善，支持可配置ICON等等