index.js

import React, {Component} from 'react'
import {Carousel, WingBlank} from 'antd-mobile'

import './index.scss'
import {api, getParam, http} from "@/utils"

// 课程页面滚动广告
class Carouselw extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }

    componentDidMount() {
        const _this = this
        _this.getList()
        this.timer = setInterval(function () {
            _this.getList()
        }, 10000);

    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    // 获取课程接口
    getList = () => {
        let data = {
            course_id: getParam('id')
        }
        http.post(`${API.home}/m/course/barrages`, data).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    list: res.data.data,
                });
            }
        })
    }

    render() {
        return (
            <WingBlank>
                <Carousel className="my-carousel"
                          vertical
                          dots={false}
                          autoplay
                          infinite
                >
                    {
                        this.state.list &&
                        <div className="v-item text-overflow-one">
                            <img src={this.state.list.avatar} alt=""/>
                            {this.state.list.user_name} {this.state.list.live_msg}
                        </div>
                    }

                </Carousel>
            </WingBlank>
        )
    }
}

export default Carouselw