## 04-13
> H5图片上传
- 使用input,type为file,通过设备accept="image/*"表示接受图片
```
<input name="image" accept="image/*" className="upload-input" type="file"/>
```
> 使用antd-mobile的switch组件时,组件无法用,无点击切换效果
- 注意:valuePropName属性必须,且为'checked'
```
<List>
<Item extra={<Switch
{...getFieldProps('openRecord',{initialValue:true,valuePropName:'checked'})}
onClick={(checked)=>console.log(checked)}/>
}>计步</Item>
</List>
```
## 04-17
> react-router的路由跳转
```
# 通过context对象的router属性实现
# 组件内部
static contextTypes ={
router:PropTypes.object
}
componentWillMount(){
this.context.router.history.push('/login')
}
```
> 图片上传,formData打印出来为空
![空图](https://segmentfault.com/img/bV0DQw?w=108&h=28)
```
# 直接打印是看不到的,要用FormData的get()和getAll()方法
formData.append("file", files[0]);
formData.get("file"); // "aa" console.log这个
```
> H5 fileApi 实现图片上传前预览
```
var file = document.getElementById('fileInput').files[0];
var reader = new FileReader();
reader.onload=function(e){
document.getElementById('showImg').src=e.target.result;
}
reader.readAsDataURL(file);
```
> react或者vue结合axios图片上传(图片文件与其他form表单字段同时上传)
- 设置上传头:'Content-Type':'multipart/form-data'
- 文件格式通过 formData 接口上传
```
var file = this.refs.uploadInput.files[0]; //拿到相应input的file
var formData = new FormData();
formData.append('file',file);
formData.append('tel',18111111111); //添加其他字段信息
formData.append('name','mynickName');
// 设置上传的请求头
let config = {
headers:{
'Content-Type':'multipart/form-data'
}
}
axios.post('/api/tel/saveOrUpdate',formData,config)
.then(res=>{
console.log(res);
})
```
## 04-24
> 1. scss定义函数并使用(场景:动态转换px为rem)
- `$ `:定义变量
- `@function ` :定义函数
- `@return` : 定义返回值
```
# bass.scss
$baseSize:37.5;
@function calcSize($px){
@return $px/$baseSize + rem;
}
```
> 2. .gitignore编写和不生效的原因
- `#` 此为注释 – 将被 Git 忽略
- `*.sample ` 忽略所有 .sample 结尾的文件
- `!lib.sample` 但 lib.sample 除外
- `/TODO` 仅仅忽略项目根目录下的 TODO 文件,不包括 subdir/TODO
- `build/` 忽略 build/ 目录下的所有文件
- `doc/*.txt` 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt
> 把某些目录或文件加入忽略规则,按照上述方法定义后发现并未生效,原因是.gitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。那么解决方法就是先把本地缓存删除(改变成未被追踪状态),然后再提交:
```
git rm -r --cached .
git add .
git commit -m 'update .gitignore'
```
- 注意(--cached后面有个 `.`)
> 3. css3 动画的播放暂停控制
- `animation-play-state`:控制,值有 `paused`,`running`
- `-webkit-animation-play-state`: 兼容safari,chrome
```
div{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
```
## 04-26
> 1. 关于H5的audio标签的常用属性,方法,事件
```
# 在react中拿到audio标签的DOM( <audio ref="audio"></audio>)
this.audioDOM = ReactDOM.findDOMNode(this.refs.audio)
# js调用audio播放,暂停
this.audioDOM.src="xxx"
this.audioDOM.load() //针对ios的加载
this.audioDOM.play()
this.audioDOM.pause()
# audio加载的事件
this.audioDOM.addEventListener("canplay",fn,false); //开始播放时
this.audioDOM.addEventListener("timeupdate",()=>{
var progress = this.audioDOM.currentTime/this.audioDOM.duration,
currentTime = this.audioDOM.currentTime;
},false); // 播放时间更新时(用于制作播放进度)
this.audioDOM.addEventListener("ended",fn,false); //播放结束
this.audioDOM.addEventListener("error",fn,false); //播放出错
```
> 2. 关于React-Transition-Group组件的应用
- CSSTransition组件是其中一个部份,用于过渡动效
- `in`属性控制组件启动,关闭动效
- `classNames`属性确定不同动效状态的基础className名
- `onEnter,onExit`控制动效激活,出场时的回调
```
import {CSSTransition} from 'react-transition-group';
import ReactDOM from 'react-dom';
import './test.scss';
class Test extends React.Component {
constructor(){
super() this.state={ showBox:false }
}
componentDidMount(){
this.boxDOM = ReactDOM.findDOMNode(this.refs.box); console.log(this.boxDOM)
}
toggleBox=()=>{
this.setState({ showBox:!this.state.showBox })
};
render() {
return (
<div>
<button onClick={this.toggleBox}>切换</button>
<CSSTransition
in={this.state.showBox}
classNames="test"
timeout={300}
onEnter={()=>{ this.boxDOM.style.display = "block"; }}
onExited={()=>{ this.boxDOM.style.display = "none"; }}
>
<div className="box" ref="box">
<h1>测试动画效果滴。</h1>
<div className="color-box">哈哈哈</div>
</div>
</CSSTransition>
</div>)
}
}
export default Test;
# test.scss
.box{
display: none;
transform-origin:0 bottom;
&.test-enter{ transform:rotateZ(90deg);
&.test-enter-active{
transition:transform .3s;
transform: rotateZ(0deg);
}
}
&.test-exit{
transform:rotateZ(0deg);
&.test-exit-active{
transition:transform .3s; transform: rotateZ(90deg);
}
}
.color-box{
width:200px; height:200px;
background: #ff0;
color: #000;
line-height: 200px;
text-align: center;
}
}
```
## 04-27
> 1. 今日阅读:[react-redux](https://segmentfault.com/a/1190000010188279)
- react-redux两个主要核心:Provider,connect。
- Provider组件:用于包裹App组件,并向下传入store
- connect方法:用于将state或dispatch映射到组件中;`connect(mapStateToProps,mapDispatchToProps)(MyComponent)`
> 2. swiper使用中遇到的问题
```
# 1. react,vue这类MVVM框架项目中,使用swiper
// 安装
npm install swiper
// 引入
import Swiper from 'swiper';
// 初始化
if(!this.sliderSwiper){
this.sliderSwiper=new Swiper(“.swiper-container”,{
loop:true,
autoplay:true,
pagination: {
el:'.swiper-pagination'
}
})
}
//JSX [,swiper-wrapper,swiper-slide,swiper-pagination是官方指定需要的className]
<div className="slider-container">
<div className="swiper-wrapper">
{
this.state.sliderList.map(slider=>{
return <div className="swiper-slide" key={slider.id}>
<a className="slider-nav" >
<img src={slider.picUrl} width="100%" height="100%" alt="推荐"/>
</a>
</div>
})
}
</div>
<div className="swiper-pagination"></div>
</div>
```
-` swiper-wrapper,swiper-slide,swiper-pagination`是官方指定需要的className
- 4.x.x版本的swiper与3.x.x版本的配置项有一定的差异
- 当引用了swiper后,发现页面对应样式没有用上,考虑是否引用了 swiper.css,或者 ` swiper-wrapper,swiper-slide,swiper-pagination`是否写对了
> 3. better-scroll插件
- better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
- [参考文档](http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#starty)
```
# 安装
npm install better-scroll --save
# 使用
import BScroll from 'better-scroll';
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
```
- 注意:better-scroll只处理它的第一个子元素的滚动,所以内容要用一个容器元素统一包裹起来。
- 注意:scroll容器的父容器需要限高(如:100%)