React项目中使用better-scroll

参考链接

安装

1	yarn add better-scroll

使用

1
2
3

import BScroll from 'better-scroll' l
et wrapper = document.querySelector('.wrapper') 
let scroll = new BScroll(wrapper)

参数

startX: 0 开始的X轴位置
startY: 0 开始的Y轴位置
scrollY: true 滚动方向
click: true 是否启用click事件
directionLockThreshold: 5
momentum: true 是否开启拖动惯性
bounce: true 是否启用弹力动画效果，关掉可以加速
selectedIndex: 0
rotate: 25
wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
snap: false 是否开启捕捉元素，当为 true 时，捕捉的元素会根据可滚动的位置和滚动区域计算得到可滑动几页。
snapLoop: false 是否创建当前滚动元素子集的拷贝
snapThreshold: 0.1 滑动的长度限制，只有大于这个距离才会触发事件
swipeTime: 2500 swipe 持续时间
bounceTime: 700 弹力动画持续的毫秒数
adjustTime: 400
swipeBounceTime: 1200
deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
momentumLimitTime: 300 惯性拖动的回弹时间
momentumLimitDistance: 15 惯性拖动的回弹距离
resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
probeType: 1 监听事件的触发时间，1为即时触发，3为延迟到事件完毕后触发
preventDefault: true 是否阻止默认事件
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
HWCompositing: true 是否启用硬件加速
useTransition: true 是否使用CSS3的Transition属性，否则使用-requestAnimationFram代替
useTransform: true 是否使用CSS3的Transform属性
probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

方法

refresh() 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
scrollTo(x, y, time, easing) 滚动到指定的位置
scrollBy(x, y, time, easing) 相对于当前位置偏移滚动 x,y 的距离
scrollToElement(el, time, offsetX, offsetY, easing) 滚动到指定的目标元素
stop() 立即停止当前运行的滚动动画
destroy() 销毁 better-scroll，解绑事件

事件

let scroll = new BScroll(document.getElementById('wrapper'), {
    probeType: 3//option的probeType必须要传入
})

scroll.on('scroll', (pos) => {
    console.log(pos.x + '~' + posx.y)
})

beforeScrollStart 滚动开始之前触发
scrollStart 滚动开始时触发
scroll 滚动时触发
scrollCancel 取消滚动时触发
scrollEnd 滚动结束时触发
flick 触发了 fastclick 时的回调函数
refresh 当 better-scroll 刷新时触发
destroy 销毁 better-scroll 实例时触发

封装Scroll组件

scroll.js

import React, { Component } from "react"
import BScroll from "better-scroll"
import styles from "./scroll.styl"

class Scroll extends Component {
    componentDidUpdate() {
        // 组件更新后，如果实例化了better-scroll并且需要刷新就调用refresh()函数
        if (this.bScroll && this.props.refresh === true) {
            this.bScroll.refresh();
        }
    }
    componentDidMount() {
        if (!this.bScroll) {
            this.bScroll = new BScroll(this.scrollView);
        }
    }
    componentWillUnmount() {
        this.bScroll.off("scroll");
        this.bScroll.destroy();
        this.bScroll = null;
    }
    refresh() {
        if (this.bScroll) {
            this.bScroll.refresh();
        }
    }
    render() {
        return (
            <div className={styles.scrollView} ref={ (el) => { this.scrollView = el; }}>
                {/* 获取子组件 */}
                {this.props.children}
            </div>
        );
    }
}

export default Scroll

scroll.styl

.scrollView
    width: 100%
    height: 100%
    overflow: hidden

使用 index.js

import React, { Component, Fragment } from 'react';
import Scroll from '../../common/scroll';
import styles from './styles.styl';

class Index extends Component {
    render() {
        return (
        <Fragment>
            <Scroll ref={(el) => { this.scroll = el; }}>
                <div>
                    内容
                </div>
            </Scroll>
        </Fragment>
        )
    }
}

export default Index;