基于antd实现一个轮播图
- 2019 年 12 月 11 日
- 筆記
关于antd的使用这里就不多说了，前面已经写过了，从零开始学习React-引入Ant Design 组件（八）：https://www.jianshu.com/p/e7e905d89673，现在为了对组件的熟悉，来根据文档写一个常见的轮播图吧。
1：首先生成一个空组件模板
import React, { Component } from 'react'; class Banner extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <div> <h2>我是轮播图界面</h2> </div> ) } } export default Banner;
2:引入
import { Carousel } from 'antd';
3：文档 https://ant.design/components/carousel-cn/
4:样式 在tab.css里面写好样式，并且在组件里面引入
import '../asset/css/tab.css'
tab.css内容如下
.ant-carousel .slick-slide { text-align: center; height: 360px; line-height: 160px; background: #364d79; overflow: hidden; } .ant-carousel .slick-slide h3 { color: #fff; } .ant-carousel .slick-slide h3 img{ width:100%; height:100%; }
5：参考代码
import React, { Component } from 'react'; import { Carousel } from 'antd'; import '../asset/css/tab.css' class Banner extends Component { constructor(props) { super(props); //react定义数据 this.state = { } } render() { return ( <Carousel autoplay> <div> <h3><img src={require('../asset/images/7.jpg')} alt="logo" />></h3> </div> <div> <h3><img src={require('../asset/images/8.jpg')} alt="logo" />></h3> </div> <div> <h3><img src={require('../asset/images/9.jpg')} alt="logo" />></h3> </div> <div> <h3><img src={require('../asset/images/10.jpg')} alt="logo" />></h3> </div> </Carousel> ) } } export default Banner;
动态的轮播图效果如下：
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
