基于antd实现一个轮播图
关于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 (我是轮播图界面)
}
}
export defaultBanner;
【基于antd实现一个轮播图】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 h3img{
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 (
文章图片
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号。
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 基于爱，才会有“愿望”当“要求”。2017.8.12