react(单页面) + swiper实现的滚动条，页面异步加载后 swiper 不更新

Question

swiper有两个属性：observer、observeParents可以在container、wrapper元素更新样式后更新swiper，问题是用在React单页面项目上，在切换页面后页面不刷新的话就不会更新

---

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './style.less';
import '../../lib/css/lib-base.less';
import 'flex.css/dist/data-flex.css';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';


export default class Main extends Component {
    render() {
        const {
            style,
            children,
            ...other
        } = this.props;

        return (
            <main className="content" data-flex="dir:top" data-flex-box="1" style={style}>
                <div className="swiper-container" ref={self => this.swiperID = self} data-flex-box="1" style={{width: '100%'}}>
                    <div className="swiper-wrapper">
                        <div {...other} className="swiper-slide">
                            {children}
                        </div>
                    </div>
                    <div className="swiper-scrollbar"></div>
                </div>
            </main>
        )
    }

    componentDidMount() {
        new Swiper(this.swiperID, {
            direction: 'vertical',
            scrollbar: '.swiper-scrollbar',
            slidesPerView: 'auto',
            freeMode: true,
            observer: true,
            observeParents: true,
            setWrapperSize: true
        });
    }
}

Answer 1

贴代码看看。

还有，为何要用swiper实现滚动条，好奇怪的需求。

Answer 2

我也遇到了这种问题，请问你解决了吗？