react-swiper-scroll-bar

📦 Install

npm install react-swiper-scroll-bar

yarn add react-swiper-scroll-bar

🔨 Usage

import SwiperScrollBar from 'react-swiper-scroll-bar';

export default () => (
    const [list] = useState(['111', '222222', '33333', '444', '55555', '666', '77', '888', '9999', '101', '12121', '1313']);
    <>
        <SwiperScrollBar defaultIndex={7}>
            {list.map((val: string, idx: number) => (
                <SwiperScrollBar.Item key={idx} index={idx}>
                    <div className="swiper-child xs-txt">{val}</div>
                </SwiperScrollBar.Item>
            ))}
        </SwiperScrollBar>
    </>
);

API属性

1. 给需要定位到具体位置的dom <SwiperScroll /> 标签增加 defaultIndex 属性

2. 需要改变滚动条颜色 <SwiperScroll /> 标签增加 progressColor 属性（例如：red或#249766）