Taro 自定义封装公告轮播效果（走马灯）

效果图：

思路： 设置一个块用来放置文本，并设置一个定时器不断的执行将这个文本块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;
}

• 点赞
• 收藏
• 分享
• • 文章举报

哎呦喂超超。 发布了16 篇原创文章 · 获赞 4 · 访问量 1万+ 私信 关注

标签：noticeText,Taro,轮播,自定义,bgColor,length,windowWidth,fontColor,scroll
来源： https://blog.csdn.net/harry_yaya/article/details/104494625