效果图：
思路： 设置一个块用来放置文本，并设置一个定时器不断的执行将这个文本块left进行不断的-1px（自定义）进行修改。这里会有一个定时器的性能问题，所以将定时器放到了一个run函数，在计时结束之后再次调用run函数，并销毁定时器。这样就可以做到一边计时执行函数，一边不会一直挂着计时器影响性能。ok。
直接上代码
scroll_notice.js
/*
*@description: 公告轮播组件
noticeText 文字广播内容 string
fontColor 字体颜色 string 默认#6d511e
bgColor 广播背景颜色 string 默认#fffbe6
*@author: progerchai
*@date: 2020-02-24 11:19:59
*/
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "../assets/styles/scroll_notice.scss";
export default class FqScrollNotice extends Taro.Component {
constructor() {
super(...arguments);
this.state = {
noticeText: ""
};
}
state = {
length: 375,
windowWidth: 0,
marqueePace: 1, //滚动速度
marqueeDistance: 10, //初始滚动距离
size: 4,
fontColor: "#6d511e",
bgColor: "#fffbe6"
};
componentWillMount() {
const { noticeText, fontColor, bgColor } = this.props;
this.setState({ noticeText, fontColor, bgColor });
let length = noticeText.length * 14; //文字长度,一个文字14px
let windowWidth = Taro.getSystemInfoSync().windowWidth; // 屏幕宽度
this.setState({ length, windowWidth, marqueeDistance: windowWidth }, () => {
this.run(length);
});
}
run = length => {
let countTime = setInterval(() => {
if (
this.state.marqueeDistance * 2 <=
-this.state.windowWidth - this.state.length
) {
console.log("我到头了");
this.setState({ marqueeDistance: this.state.windowWidth });
} else {
console.log("我在继续滚动");
this.setState({ marqueeDistance: this.state.marqueeDistance - 1 });
}
this.run(length);
clearInterval(countTime);
}, 20);
};
render() {
let { noticeText, bgColor, fontColor } = this.state;
return (
<View className="scroll-wrap" style={{ backgroundColor: bgColor }}>
<View className="left-icon">
<AtIcon
prefixClass="icon"
value="laba"
size="20"
color="#F00"
></AtIcon>
</View>
<View
className="scroll overflow font28 relative"
style={{ color: fontColor }}
>
<View
className="marquee_text"
style={{ left: this.state.marqueeDistance + "px" }}
>
{noticeText}
</View>
</View>
</View>
);
}
}
1.iconfont是我自己引入的，大家可以自己去矢量图表库去下载并引入。
2.其中要注意px 与rpx之间的转换。例如scss中我设置了font-size为28px，taro中会默认把转换为28rpx，在6s尺寸下也就是14px。所以在计算的时候
this.state.marqueeDistance * 2 <=
-this.state.windowWidth - this.state.length
就是考虑到这个问题，所以*2
3.我这里设置的参数比较少，只预留了noticeText（轮播文字）, bgColor（背景色）, fontColor（文字颜色）。在页面引入组件之后 ，使用：
<FqScrollNotice
noticeText="我是轮播公告我是轮播公告我是轮播公告公告"
bgColor="#fffbe6"
fontColor="#6d511e"
></FqScrollNotice>
scroll_notice.scss
```go
/*
*@description: 公告轮播组件样式
*@author: progerchai
*@e-mail: progerchai@qq.com
*@date: 2020-02-24 11:21:29
*/
.scroll-wrap {
padding: 10px 0 10px 10px;
height: 50px;
line-height: 50px;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
}
.overflow {
overflow: hidden;
}
.left-icon {
font-size: 58px;
width: 50px;
}
.font28 {
font-size: 28px;
}
.relative {
position: relative;
}
.scroll {
flex: 1;
height: 40px;
}
.marquee_text {
white-space: nowrap;
position: absolute;
top: 0;
}