查看: 1988|回复: 1
打印 上一主题 下一主题

请教下为什么 swiper4 的回调方法都不执行

[复制链接]

该用户从未签到

1

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
跳转到指定楼层
楼主
发表于 2018-4-16 19:31:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
class List extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            listData: []
        };

        this.page = 0;
        this.mySwiper = null;
    };

    componentWillMount (nextProps, nextState) {
        this.getListData();
        console.log(1)
    };

    componentDidMount() {
        console.log(2)
        this.mySwiper = new Swiper('.star-list', {
            direction: 'vertical',
            slidesPerView : 6,
            centeredSlides : false,
            on: {
                click: function(a, b, c){
                    alert(a, b, c)
                }
            }
        });
    };

    componentDidUpdate(prevProps, prevState) {
        this.mySwiper.updateSlidesSize();
    };

    render () {
        return (
            <div className="star-list">
                <div className="swiper-wrapper">
                    {
                        this.state.listData.map((item, index, array) => {
                            return (
                                <div className="swiper-slide" key={index}>{item.name}</div>
                            );
                        })
                    }
                </div>
            </div>
        );
    };

    getListData () {
        let isWating = this.getListData.waiting;
        if (isWating){
            console.log('正在加载');
            return;
        };
        isWating = true;

        let test = [];
        for (let i=0; i<20; i++){
            let json = {};
            json.name = this.page * 20 + i;
            test.push(json);
        };

        setTimeout(() => {
            this.setState({
                listData: this.state.listData.concat(test)
            });

            isWating = false;
            this.page += 1;
        },500);
    };
};

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-23 11:37 , Processed in 0.059564 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表