526互联

公告跑马灯

发布时间 2023-04-28 11:00:33作者: 未几

 

import React from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";

import { JDAZNoticeBar } from "@jd/jdaz-design-mobile";
import InsHeader from '../../../components/ins-header'

const Index = () => {
  const btnCallback = () => {
    alert("您点击了启动按钮");
  };
  return (
    <View className="page-container view-noticebar">
      <InsHeader title='静态文字' />
      <Text className="introduce">单行文字</Text>
      <JDAZNoticeBar scrollable={false}>天青色等烟雨,而我在等你</JDAZNoticeBar>
      <Text className="introduce">多行文字</Text>
      <JDAZNoticeBar scrollable={false} wrapable={true}>
        炊烟袅袅升,起隔江千万里.在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔
      </JDAZNoticeBar>
      <InsHeader title='跑马灯' />
      <JDAZNoticeBar>天青色等烟雨,而我在等你</JDAZNoticeBar>
      <Text className="introduce">单行文字 带图标</Text>
      <JDAZNoticeBar icon={true} >天青色等烟雨,而我在等你</JDAZNoticeBar>
      <InsHeader title='带图标' />
      <Text className="introduce">单行文字</Text>
      <JDAZNoticeBar scrollable={false} icon={true}>
        天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">多行文字</Text>
      <JDAZNoticeBar scrollable={false} icon={true} wrapable={true}>
        天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔
      </JDAZNoticeBar>
      <InsHeader title='带按钮,链接' />
      <Text className="introduce">单行，可点击按钮</Text>
      <JDAZNoticeBar
        scrollable={false}
        icon={true}
        mode={"button"}
        click={btnCallback}
      >
        天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">多行，可点击按钮</Text>
      <JDAZNoticeBar
        scrollable={false}
        icon={true}
        mode={"button"}
        click={btnCallback}
        wrapable={true}
      >
        天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔
      </JDAZNoticeBar>
      <Text className="introduce">单行跑马灯，可点击按钮</Text>
      <JDAZNoticeBar
        scrollable={true}
        icon={true}
        mode={"button"}
        click={btnCallback}
      >
        天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">多行，链接</Text>
      <JDAZNoticeBar
        scrollable={false}
        icon={true}
        mode={"link"}
        click={btnCallback}
        wrapable={true}
      >
        天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔
      </JDAZNoticeBar>
      <Text className="introduce">单行，链接</Text>
      <JDAZNoticeBar
        icon={true}
        scrollable={false}
        mode={"link"}
        wrapable={false}
        click={btnCallback}
      >
        天青色等烟雨,而我在等你 天青色等烟雨,而我在等你 天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">单行，跑马灯,链接</Text>
      <JDAZNoticeBar
        icon={true}
        scrollable={true}
        mode={"link"}
        wrapable={false}
        click={btnCallback}
      >
        天青色等烟雨,而我在等你 天青色等烟雨,而我在等你 天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <InsHeader title='带关闭' />
      <Text className="introduce">单行文字 可关闭</Text>
      <JDAZNoticeBar scrollable={false} iconClose={true}>
        天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">单行，带图标，可关闭</Text>
      <JDAZNoticeBar scrollable={false} icon={true} iconClose={true}>
        天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">多行，带图标，可关闭</Text>
      <JDAZNoticeBar
        scrollable={false}
        icon={true}
        iconClose={true}
        wrapable={true}
      >
        天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔
      </JDAZNoticeBar>
      <Text className="introduce">单行跑马灯，可点击按钮，可关闭</Text>
      <JDAZNoticeBar
        scrollable={true}
        icon={true}
        iconClose={true}
        mode={"button"}
        click={btnCallback}
      >
        天青色等烟雨,而我在等你
      </JDAZNoticeBar>
      <Text className="introduce">多行，带图标，可关闭，带链接</Text>
      <JDAZNoticeBar
        scrollable={false}
        icon={true}
        iconClose={true}
        mode={"link"}
        click={btnCallback}
        wrapable={true}
      >
        天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔
      </JDAZNoticeBar>
      <Text className="introduce">单行跑马灯，链接，可关闭</Text>
      <JDAZNoticeBar
        icon={true}
        iconClose={true}
        scrollable={true}
        mode={"link"}
        wrapable={false}
        click={btnCallback}
      >
        天青色等烟雨,而我在等你 天青色等烟雨,而我在等你 天青色等烟雨,而我在等你
      </JDAZNoticeBar>
    </View>
  );
};

export default Index;
 
 
 
 
 
 

 

 

 

 

 

import React, { useEffect, useRef, useState } from 'react'
import { View, Image, Text } from '@tarojs/components'
import './noticebar.scss'

interface JDAZNoticeBarProps {
  children?: unknown // 展示文字
  icon?: boolean, // 是否展示喇叭
  speed?: number, // 默认 60
  frameWise?: boolean, // 方式
  wrapable?: boolean, // 是否多行
  scrollable?: boolean, // 是否滚动
  iconClose?: boolean, // 是否带关闭
  mode?: 'button'|'link', // button,link // 按钮和查看详情
  modeText?: string, // 按钮文字
  click?: () => void, // 按钮回调
  close?: () => void, // 关闭回调
}

const JDAZNoticeBar = (
  { scrollable = true,
    wrapable = false,
    icon = false,
    children = '',
    frameWise = false,
    iconClose = false,
    mode,
    click,
    close,
    modeText,
    speed = 60,
  }: JDAZNoticeBarProps
) => {

  const content = useRef<HTMLInputElement | null>(null)
  const marquee = useRef<HTMLInputElement | null>(null)
  const [show, setShow] = useState(true)
  let timer
  let speeds = 0
  useEffect(() => {
    // console.log(children);
   
    if (scrollable) {
      if (frameWise) {
        // 定时器版本
        move()
      } else {
        ctransition()
      }
    }
    return () => {
      clearInterval(timer)
    }
  }, [])
 
  // 定时器版本
  const move = () => {
    if (content.current && marquee.current) {
      let contentwidth = content.current.scrollWidth
      let marqueewidth = marquee.current.clientWidth
      // console.log(contentwidth,marqueewidth);
      setInterval((content) => {
        speeds -= speed/10?speed:2
        content.current.style.transform = "translateX(" + speeds + "px)";
        if (-contentwidth >= speeds) {
          speeds = marqueewidth
        }
      }, 60)
    }
  }
  // c3版本
  const ctransition = () => {
    if (content.current && marquee.current) {
      let contentwidth = content.current.scrollWidth // 内容宽度
      let marqueewidth = marquee.current.clientWidth // 容器宽度
      const deltaX = contentwidth + marqueewidth // 移动距离
      const deltaT = deltaX / speed + 's' // 周期
      content.current.style.transitionTimingFunction = 'linear' // 线性动画
      const animation = (content) => {
          // 每个周期的开始，先让内容归位
          content.current.style['transition-duration'] = '0s'
          content.current.style.transform = `translateX(${marqueewidth}px)`
          // 设置过渡时间和目标
          setTimeout(() => {
              content.current.style.transitionDuration = deltaT
              content.current.style.transform = `translateX(${-contentwidth}px)`
          }, 100)
      }
      animation(content)
      timer = setInterval(() => {
          animation(content)
      }, deltaX * 1000 / speed + 100)
      return () => {
          clearInterval(timer)
      }
    }
  }
  const Close = () => {
    clearInterval(timer)
     close && close()
    setShow(false)
  }
  const modes = () => {
    if (mode === 'link'&& !wrapable) {
      return (
        <View className='JD-hide-show'>
          <View className='JD-hide-gradually'></View>
          <View className='JD-hide-text' onClick={click}>
            { modeText ? modeText:<View className='JD-hide-text-detail'>查看详情&nbsp;<Text className='font_family icon-icon-arrow-1 JD-icon-details' /></View>}
          </View>
        </View>
      )
    } else if (mode === 'button'&& !wrapable) {
      return (
        <View className='JD-hide-show'>
          <View className='JD-hide-gradually'></View>
          <View className='JD-hide-btn' onClick={click} >
            { modeText ? modeText:'启动'}
          </View>
        </View>
      )
    } else {
      return ''
    }
  }
  const wrapableBtn = () => {
    if (wrapable && mode === 'link') {
      return (
        <View className='JD-hide-text' onClick={click}>
          { modeText ? modeText:<View className='JD-hide-text-detail'>查看详情&nbsp;<Text className='font_family icon-icon-arrow-1 JD-icon-details' /></View>}
        </View>
      )
    } else if (wrapable && mode === 'button') {
      return (
        <View className='JD-hide-btn' onClick={click} >
          { modeText ? modeText:'启动'}
        </View>
      )
    }
  }
  return (
    <View className='JD-notice-bar'>
      {
        show &&
        <View className='JD-noticebar JD-noticebar--single'>
          {iconClose && <Text className='font_family icon-icon-close-2 JD-icon JD-color' onClick={Close} />}
          {icon && <Text className='font_family icon-icon-notice JD-icon JD-size' /> }
            <View className='JD-noticebar__content' ref={marquee}>
              <View className='JD-noticebar__content-text' ref={content} >
                <View className='JD-noticebar__content-inner' style={{whiteSpace:wrapable?'pre-line':'nowrap'}} >
                {children}
                </View>
              </View>
              {(scrollable) && <View className='JD-hide'></View>}
              {
                mode && modes()
              }
            </View>
            {wrapable && mode &&  wrapableBtn()}
        </View>
      }
    </View>
  )
}
export default JDAZNoticeBar