react+better-movable

效果图

下载

npm install @better-scroll/movable --save

// or

yarn add @better-scroll/movable

JS

import React, { useEffect, useRef, useState } from 'react'
import styles from './style.less'
import { BS } from './utils/index'
const index = () =>
{
    useEffect(() =>
    {  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~
        // let timer = setInterval(() =>
        // {

        // }, 1000)
        BS(scrollRef.current)
        return () =>
        {   // 组件卸载之前 做一些收尾工作 比如清楚定时器/取消订阅 等 ~
            // clearInterval(timer)

        }
    }, [])  // 检测数组内变量 如果为空 则监控全局
    const [data, setData] = useState([
        '😀 😁 😂 🤣 😃',
        '😄 😅 😆 😉 😊',
        '😫 😴 😌 😛 😜',
        '👆🏻 😒 😓 😔 👇🏻'])
    const scrollRef = useRef()
    return (
        <div className={styles.container}>
            <div ref={scrollRef} className={styles.wrapper}>
                <div className={styles.content}>
                    {data.map((data, index) => (
                        <div key={index} className={styles.item} >{data}</div>
                    ))}

                </div>
            </div>
        </div>
    )
}

export default index

CSS

.container {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

.wrapper {
  height: 400px;
  width: 400px;
  overflow: hidden;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.content {
  width: 220px;
}

.item {
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  text-align: center;

  &:nth-child(2n) {
    background-color: pink;
  }

  &:nth-child(2n+1) {
    background-color: rgb(76, 133, 133);
  }
}

utils

import BScroll from '@better-scroll/core'  // BScroll 核心
import Movable from '@better-scroll/movable'  // BScroll 活动

BScroll.use(Movable) // 活动



// Y轴滚动
export const BS = (wrapper, setBsContainer = false, action = false,) =>
{
    const { payload } = action
    if (wrapper)
    {
        if (typeof wrapper === 'string')
        {
            let wrapperRef = document.querySelector('#' + wrapper)
            deploy(wrapperRef ? wrapperRef : null, setBsContainer ? setBsContainer : null, payload ? payload.callback : null)
        } else
        {
            deploy(wrapper ? wrapper : null, setBsContainer ? setBsContainer : null, payload ? payload.callback : null)
        }
    }
}
// Y轴配置
const deploy = (wrapper, setBsContainer, callback) =>
{
    let bs = new BScroll(wrapper, {
        bindToTarget: true,
        scrollX: true,
        scrollY: true,
        freeScroll: true,
        movable: true,
        startX: 20,
        startY: 20
    })

    if (setBsContainer) setBsContainer(bs)  // 用于保存 bs 对象

    bs.on('scroll', position =>
    {
        if (callback)
        {
            const { scrolled } = callback
            scrolled(position, bs) // 发送两个参数 position 位置  bs 对象
        }
        // 默认情况下 BScroll 是不可以实时监听滚动位置
        // console.log(position); // 实时滚动的位置
    })

    bs.on('scrollEnd', e =>
    {
        console.log('滚动结束');
    })
}