react 使用react-seamless-scroll实现无缝滚动

文章目录

  • [1. 实现无缝滚动效果](#1. 实现无缝滚动效果)
  • [2. react-seamless-scroll 无缝滚动案例介绍](#2. react-seamless-scroll 无缝滚动案例介绍)
  • [3. react 项目集成](#3. react 项目集成)
    • [3.1 项目引入 `cssSeamlessScroll` 滚动组件](#3.1 项目引入 cssSeamlessScroll 滚动组件)
    • [3.2 完整代码](#3.2 完整代码)
      • [3.2.1 newBet.tsx 代码](#3.2.1 newBet.tsx 代码)
      • [3.2.2 index.module.scss](#3.2.2 index.module.scss)

1. 实现无缝滚动效果

  1. 实现单步向下滚动
  2. 点击更多展开,收起,调整 scroll 高度

2. react-seamless-scroll 无缝滚动案例介绍

  1. 项目地址 react-seamless-scroll
  2. 拉下来跑起来效果(gif录屏有点卡,实际很丝滑)
  3. 可以支持多种无缝滚动方案,如 向下滚动向左滚动滚动速度鼠标悬停单布停顿单行停顿时间数组属性更新数组添加数据图表滚动
  4. react-seamless-scroll 无缝滚动有两种实现方式,一种是 cssSeamlessScroll,另外一种是 jsSeamlessScroll

3. react 项目集成

3.1 项目引入 cssSeamlessScroll 滚动组件

1.这里我使用的 cssSeamlessScroll 的。

  1. cssSeamlessScroll 组件 的代码复制到项目中

3.2 完整代码

3.2.1 newBet.tsx 代码

ts 复制代码
import React, { useState } from 'react';
import style from '../style/index.module.scss';
// 导入滚动的cssSeamlessScroll
import CssSeamlessScroll from './cssSeamlessScroll/cssSeamlessScroll'

const NewBet = () => {
    const [height, setHeight] = useState(320);
    // mock 后端返回数据
    const [arr, setArr] = useState([
        { gameName: '象财神', player: 'Dorothy MurrayDorothy Murray', betAmount: 4020, profit: -476.53 },
        { gameName: '皇上吉祥', player: '隐身', betAmount: 4020, profit: 516.82 },
        { gameName: '水果丛林', player: 'Frederick Long', betAmount: 4020, profit: 809.59 },
        { gameName: '唐伯虎点秋香', player: '隐身', betAmount: 4020, profit: -928.13 },
        { gameName: '鼠鼠福福', player: 'Adele Moody', betAmount: 4020, profit: -901.85 },
        { gameName: '宝石侠-1111', player: 'Maggie Cobb', betAmount: 4020, profit: 135.91 },
        { gameName: '糖果连连爆', player: 'Jeremiah Harran', betAmount: 4020, profit: 960.88 },
        { gameName: '艳后之迷', player: 'Nellie Wong', betAmount: 4020, profit: 227.48 },
        { gameName: '象财神', player: 'Dorothy MurrayDorothy Murray', betAmount: 4020, profit: -476.53 },
        { gameName: '皇上吉祥', player: '隐身', betAmount: 4020, profit: 516.82 },
        { gameName: '水果丛林', player: 'Frederick Long', betAmount: 4020, profit: 809.59 },
        { gameName: '唐伯虎点秋香', player: '隐身', betAmount: 4020, profit: -928.13 },
        { gameName: '鼠鼠福福', player: 'Adele Moody', betAmount: 4020, profit: -901.85 },
        { gameName: '宝石侠-1111', player: 'Maggie Cobb', betAmount: 4020, profit: 135.91 },
        { gameName: '糖果连连爆', player: 'Jeremiah Harran', betAmount: 4020, profit: 960.88 },
        { gameName: '艳后之迷', player: 'Nellie Wong', betAmount: 4020, profit: 227.48 },
    ]);

    return (
        <div className={style.newBetContent}>
            <div className='px-3 text-white'>
                <div className={style.table}>
                    <div className={style.header}>
                        <span>游戏</span>
                        <span>玩家</span>
                        <span>投注</span>
                        <span>利润额</span>
                    </div>
                    <div className={style.scroll} style={{ height: height + 'px' }}>
                        <CssSeamlessScroll datas={arr} direction="down" duration={20} step={16}>
                            {arr.map((_item, _index) => (
                                <div className={style.item}>
                                    <span><img className='h-5 mr-1' src={require('@/branch/assets/images/home/majorVictory/icon-gold.png')} />{_item.gameName}</span>
                                    <span>{_item.player}</span>
                                    <span>{_item.betAmount}</span>
                                    <span className={_item.profit > 0 ? style.green : style.red}>{_item.profit}<img className='h-3 ml-1' src={require('@/branch/assets/images/home/majorVictory/icon-gold.png')} /></span>
                                </div>
                            ))}
                        </CssSeamlessScroll>
                    </div>
                    <div className={style.moreBtn} onClick={() => {
                        setHeight(height == 320 ? 520 : 320)
                    }}>
                        <span>展示更多</span>
                        {
                            height == 320 ?
                                <img className='h-3 ml-2' src={require('@/branch/assets/images/sclog/bh.png')} /> :
                                <img className='h-3 ml-2' src={require('@/branch/assets/images/sclog/zk.png')} />
                        }
                    </div>
                </div>
            </div>
        </div>
    );
};
export default NewBet;

3.2.2 index.module.scss

css 复制代码
.newBetContent {
    width: 100%;
    .table,
    .scroll {
        .header,
        .item {
            height: 40px;
            display: flex;
            align-items: center;
            color: #93acd3;
            font-size: 12px;
            span {
                text-align: left;
                img {
                    vertical-align: middle;
                }
                &:nth-child(1),
                &:nth-child(2) {
                    display: inline-block;
                    width: 103px;
                    white-space: nowrap; /* 强制内容在一行上显示,防止换行 */
                    overflow: hidden; /* 超出容器部分隐藏 */
                    text-overflow: ellipsis; /* 超出容器部分显示省略号 */
                }
                &:nth-child(2) {
                    text-align: center;
                    color: #fff;
                }
                &:nth-child(3) {
                    text-align: center;
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    color: #fff;
                }
                &:nth-child(4) {
                    display: inline-block;
                    width: 80px;
                    text-align: right;
                }
                &.green {
                    color: #3bc116;
                }
                &.red {
                    color: #f53202;
                }
            }
        }
        .header {
            height: 32px;
            line-height: 32px;
            span {
                &:nth-child(2),
                &:nth-child(3) {
                    color: #93acd3;
                }
            }
        }
    }
    .table {
        background: #161f2c;
        border-radius: 10px;
        padding: 0px 8px;
        text-align: center;
        .moreBtn {
            margin: 16px auto;
            display: inline-block;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            line-height: 14px;
            background: #1e2837;
            border-radius: 10px;
            padding: 9px 12px;
            span {
                font-size: 14px;
                color: #93acd3;
            }
            img {
                margin-top: 1px;
            }
        }
    }
    .scroll {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        position: relative;
        transition: height 0.5s ease;
    }
}
相关推荐
咔咔库奇1 小时前
【react】基础教程
前端·react.js·前端框架
程序员黄同学5 小时前
请谈谈 React 中的虚拟 DOM,如何通过 Diff 算法最小化真实DOM 更新次数?
javascript·算法·react.js
hamburgerDaddy111 小时前
从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(二)
前端·javascript·mongodb·react.js·前端框架·express
Alang13 小时前
Antd table 无限滚动+懒加载
前端·javascript·react.js
bigyoung14 小时前
告警 Detected multiple renderers concurrently rendering the same context provider
react.js·前端框架
前端双越老师16 小时前
React19 和 Nextjs15 可否用于生产环境?
react.js·全栈·next.js
咔咔库奇16 小时前
【react】进阶教程02
前端·react.js·前端框架
七灵微17 小时前
【前端】react大全一本通
前端·react.js·前端框架
初遇你时动了情17 小时前
react使用react-quill 富文本插件、加入handlers富文本不显示解决办法
前端·javascript·react.js
野槐17 小时前
react路由总结
前端·javascript·react.js