Taro3好用的跑马灯条

安装

yarn add taro-marquee

使用

import Broadcast from 'taro3-marquee'
...
<Broadcast
    infoStr={'测试文案'}
/>
...

模式

重建模式（默认）

通过一个变量，频繁的进行挂载和卸载。

import Broadcast,{ BROADCAST_REBUILD } from 'taro3-marquee'

export default () => {
  const [flag, setFlag] = useState(); // flag 为true就显示

  return (
    <View
      onClick={() => {
        setFlag(!flag);
      }}
    >
      {flag && <Broadcast mode={BROADCAST_REBUILD} nfoStr={"测试文案"} />}
    </View>
  );
};

常驻模式

简单讲就是组件不通过变量进行频繁的挂载和卸载，仅仅通过样式进行显示和隐藏。

import Broadcast,{ BROADCAST_LIVE } from 'taro3-marquee'

export default () => {
  const [falg, setFlag] = useState(); // flag 为true就显示
  return (
    <View
      onClick={() => {
        setFlag(!flag);
      }}
    >
      <View
        style={{
          visibility: flag ? "" : "hidden",
        }}
      >
        <Broadcast
          mode={BROADCAST_LIVE} // 模式
          isRest={flag} // isRest用来触发组件的重置刷新
          infoStr={"测试文案"}
        />
      </View>
    </View>
  );
};

配置项一览

• mode 组件的存在模式

  • BROADCAST_REBUILD（默认）：频繁的销毁重建。
  • BROADCAST_LIVE：组件常驻，仅仅通过样式进行显示隐藏。

• isReset 重置开关

  • 作用：主动控制组件的重置刷新。
  • 注意：仅当模式为BROADCAST_LIVE时有效。

• infoStr 显示的文本信息。

• bgColor 跑马灯背景板颜色。

  • 默认： #FEF6EAFF

• fontColor： 字体颜色

  • 默认："#FF8800FF",

• fontSize 字体大小，根据该值进行留白计算,

  • 默认："12px",

• startPercent 跑马灯文本起步的位置（比例）,

  • 默认：0.5 也就是从中心位置开始