使用better-scroll解决IOS上滑动事件不能实时触发的问题

最新推荐文章于 2024-08-09 08:33:04 发布

daoke_li

最新推荐文章于 2024-08-09 08:33:04 发布

阅读量1.2k

点赞数

分类专栏：前端移动开发前端文章标签： better-scroll IOS兼容实时滚动 scroll事件移动端开发

本文链接：https://blog.youkuaiyun.com/daoke_li/article/details/106101803

版权

前端同时被 2 个专栏收录

95 篇文章

订阅专栏

前端移动开发

32 篇文章

订阅专栏

API文档：http://ustbhuangyi.github.io/better-scroll/doc/

目的

解决IOS上滑动事件不能实时触发的问题。

步骤

1，开始

npm安装"better-scroll"最新版，也可以尝试测试版本，如 "^2.0.0-alpha.20",

2，导入，初始化

import BScroll from "better-scroll";

let scroll = new BScroll('.container', {
    // 1-会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
    // 2-会在屏幕滑动的过程中实时的派发 scroll 事件；
    // 3-不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
    probeType: 3, 
    bounce: {top: false}, // 向下滑到底(顶部出现)时不反弹
    click: true, // 可响应点击事件
    preventDefaultException: {
        // class为am-picker-popup-wrap的元素的事件解除屏蔽
        className: /(^|\s)am-picker-popup-wrap (\s|$)/,
        // DIV、INPUT、TEXTAREA、BUTTON、SELECT这些标签的事件解除屏蔽
        tagName: /^(DIV|INPUT|TEXTAREA|BUTTON|SELECT)$/
    }
});

3，定义回调

// 绑定scroll事件
scroll.on('scroll', (v) => {
    // v.y为纵向滑动距离
    const scrollTop = -v.y - 2.8125 * 16 * window.scale;
    const cardsTop = 15.5 * 16 * window.scale;
    // 可根据滑动距离设置class
    if (scrollTop > 1) { // 开始上滑
        $body.classList.add('slideUp');
        if (scrollTop > cardsTop) { // 卡片到顶了
            $body.classList.add('slideToTop');
        } else {
            $body.classList.remove('slideToTop');
        }
    } else {
        $body.classList.remove('slideUp');
    }
});

4，组件引用

这里根据业务，要判断内容满一屏幕才能滑动，否则居屏幕底定位

// 组件挂载后使用
componentDidMount() {
    // 根据getLayout判断元素要滑动还是要屏幕定位
    const resFixedBottom = getLayout();
    if(!resFixedBottom){
        bindScroll();
    }
}
render(){
    return ……
    <div className={'container'}> // 被better-scroll初始化的容器
        <div className={'scrollContainer'}> // 容器必须有这么一个子元素把内容都包在里面
            <div className={'auto-position ' + [this.state.fixedBottom]}> // 自动定位的容器
                ……
              </div>
            {/*修复ios最后一个元素的margin-bottom失效的问题*/}
            <div style={window.mobileModel === 'iphoneX' ? {height: '1.375rem'} : {height: '0.5rem'}}/>
        </div>
        <section className={'fixed'}> // 自定义fixed定位的元素必须放在scrollContainer外面
            ……
        </section>
    </div>
}

注意事项

.container要有固定高度，且小于.scrollContainer的高度才能滑动。
如果页面有需要fixed定位的元素，且写到scrollContainer里，其参考宽度以及定位置会受到影响，因为better-scroll初始化容器时，会添加transform等css属性。详情参见：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
如果安卓在chrome上调试的时候发现有怪异现象，则把仿真器关掉再试。