公告跑马灯

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 (

<JDAZNoticeBar scrollable={false}>天青色等烟雨,而我在等你</JDAZNoticeBar>

炊烟袅袅升,起隔江千万里.在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔

</JDAZNoticeBar>

<JDAZNoticeBar>天青色等烟雨,而我在等你</JDAZNoticeBar>

<Text className="introduce">单行文字带图标</Text>

<JDAZNoticeBar icon={true} >天青色等烟雨,而我在等你</JDAZNoticeBar>

天青色等烟雨,而我在等你

</JDAZNoticeBar>

天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔

</JDAZNoticeBar>

<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>

<JDAZNoticeBar

scrollable={false}

icon={true}

mode={"link"}

click={btnCallback}

wrapable={true}

天青色等烟雨,而我在等你。炊烟袅袅升,起隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔

</JDAZNoticeBar>

<JDAZNoticeBar

icon={true}

scrollable={false}

mode={"link"}

wrapable={false}

click={btnCallback}

天青色等烟雨,而我在等你天青色等烟雨,而我在等你天青色等烟雨,而我在等你

</JDAZNoticeBar>

<JDAZNoticeBar

icon={true}

scrollable={true}

mode={"link"}

wrapable={false}

click={btnCallback}

天青色等烟雨,而我在等你天青色等烟雨,而我在等你天青色等烟雨,而我在等你

</JDAZNoticeBar>

<Text className="introduce">单行文字可关闭</Text>

天青色等烟雨,而我在等你

</JDAZNoticeBar>

天青色等烟雨,而我在等你

</JDAZNoticeBar>

<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>

<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 (

{ modeText ? modeText:<View className='JD-hide-text-detail'>查看详情 <Text className='font_family icon-icon-arrow-1 JD-icon-details' /></View>}

</View>

)

} else if (mode === 'button'&& !wrapable) {

return (

{ modeText ? modeText:'启动'}

</View>

)

} else {

return ''

}

const wrapableBtn = () => {

if (wrapable && mode === 'link') {

return (

{ modeText ? modeText:<View className='JD-hide-text-detail'>查看详情 <Text className='font_family icon-icon-arrow-1 JD-icon-details' /></View>}

</View>

)

} else if (wrapable && mode === 'button') {

return (

{ modeText ? modeText:'启动'}

</View>

)

}

return (

{

show &&

{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' /> }

{children}

</View>

{(scrollable) && <View className='JD-hide'></View>}

{

mode && modes()

}

</View>

{wrapable && mode && wrapableBtn()}

</View>

}

</View>

)

}

export default JDAZNoticeBar

posted @ 2023-04-28 10:51 未几阅读(61) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 跑马灯封装

· element-ui下表格头部字段hover显示tips信息

· 如何使用 React 构建跑马灯组件

· React-和-ReactNative-第二版-全-

· 分别用Js和vue实现跑马灯效果

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统

历史上的今天：
2021-04-28 横向滚动 css

公告

昵称：未几
园龄： 6年
粉丝： 12
关注： 19

+加关注

2025年3月

日

一

二

三

四

五

六

未几

公告跑马灯

公告

搜索

常用链接

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论