图片轮播+放大缩小+拖动

html-css010

图片轮播+放大缩小+拖动,第1张

一、react+antd创建项目

npm install -g create-react-app //全局安装脚手架create-react-app

create-react-app react-cli-demo //创建项目create-react-app

cd react-cli-demo //进入到create-react-app目录里面

yarn start //启动项目

yarn add antd //安装antd

二、重写App.js页面

1、在头部导入

import React, { Component } from 'react'

import 'antd/dist/antd.css'

import { Carousel, Tooltip} from 'antd'

2、构造函数定义

3、图片轮播函数定义

4、放大缩小和拖动事件

5、页面渲染

按钮定义

图片定义

渲染

三、总结：antd爬坑：当由不轮播变为轮播时，antd没有更新autoplay，需要手动设置

this.refs.carousel.innerSlider.autoPlay()

github地址： https://github.com/MangliZeng/react-cli-app.git

先贴个官网的图片

然后说说整体流程...

然后重新 npm i

再重新运行，就解决了

奉上参考资料

Vue-cli3.0配置全局less

vue antd 按需加载 报错.bezierEasingMixin()

工作中使用antd需要对其样式进行一些修改，一开始以为直接在组件上加入className就好，但发现在好的情况下完全不可取，问了对这个比较熟悉，恍然大悟，记录下来，映像好点

修改样式无法两种情况，全局样式修改，局部样式修改

下面我就已一个按钮组件为例子来写个demo

特点： 虽然你是在当前目录下的less或css文件修改了，但是全局生效的，建议如果有全局修改的需求，放到global.less的文件中修改，并做好注释。

如：我这边修改按钮组件的样式

注意：这里就要提到css modules的一个类名加载机制了，上面应该看到了，最外层有个类 为 lqDemo ，因为css modules 的机制是，如果你不使用它，那就不会进行加载。所以无论如果需要在外面加上一个class类，进行使用，否则仅仅引用是不会生效的

这个时候就需要用到css的作用域了

像这样嵌套在:global下就好了

哈哈哈 是不是就解决了，其实还有其它的方式，但我觉得这种方式是最好的