首页 > 其他 > 详细

react 中封装一个简单的滚动条组件

时间:2019-07-26 20:09:30      阅读:169      评论:0      收藏:0      [点我收藏+]
import React, { Component } from ‘react‘
//引入better-scroll
import BScroll from ‘better-scroll‘
import ‘./style.scss‘
export default class AppScroll extends Component {
    //利用ref精准的获取dom元素
    wrapper = React.createRef();
    render() {
        return (
            <div className="scroll-wrapper" ref={this.wrapper}>
              <div className="scroll-content">
                  {this.props.children}
              </div>  
            </div>
        )
    }

    componentDidMount(){
        let scroll = new BScroll(this.wrapper.current)
           // 在用户需要滚动前及时更新滚动视图
        scroll.on(‘beforeScrollStart‘, ()=>{
            scroll.refresh();
        })
    }
}

 

css

 

.scroll-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

 

react 中封装一个简单的滚动条组件

原文:https://www.cnblogs.com/r-mp/p/11252533.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!