效果图
下载
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('滚动结束');
})
}