https://github.com/future-team/ph-swipe
:whale2:基于react开发的移动端(PC端)滑动组件
https://github.com/future-team/ph-swipe
Last synced: 16 days ago
JSON representation
:whale2:基于react开发的移动端(PC端)滑动组件
- Host: GitHub
- URL: https://github.com/future-team/ph-swipe
- Owner: future-team
- License: mit
- Created: 2016-05-25T11:46:25.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-03T03:26:57.000Z (about 10 years ago)
- Last Synced: 2026-05-26T09:32:42.030Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 4.92 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# ph-swipe
> 基于react的滑动组件[a swipe module based on react]
> 只需要一个配置文件就可以轻松完成照片浏览组件搭建[one prop object to solve everything]
## UI展示
>
## 命令
``` bash
git clone https://github.com/future-team/ph-swipe.git
=== or ===
npm install ph-swipe
```
## usage[使用方式]
```javascript
import React,{Component} from 'react';
import PhSwipe from 'ph-swipe';
import {render,findDOMNode} from 'react-dom';
export default class PhSwipeDemo extends Component {
constructor(props, context) {
super(props, context);
}
render(){
let imgArr=[
'http://img5.imgtn.bdimg.com/it/u=1478257864,2882073929&fm=21&gp=0.jpg',
'http://www.bz55.com/uploads/allimg/150309/139-150309101F7.jpg',
'http://img2.zol.com.cn/product/95/20/ceSFw3e3TqLNM.jpg',
'http://img5.imgtn.bdimg.com/it/u=1432870041,1164599966&fm=21&gp=0.jpg'
];
/**
* 请手动左右滑动[manual swipe]
*/
var Node2Options={
imgArr:imgArr,
direction:'horizontal',//滑动方向
loop:false//是否滑动循环
};
/**
* 测试横向滑动模块[auto swipe]
*/
var Node3Options={
imgArr:imgArr,
direction:'horizontal',//滑动方向
autoPlay:true,
duration:1500,
loop:true,//是否滑动循环
activeClass:'yellow',//自定义active的样式
};
/**
* 手动垂直滑动[manual vertical swipe]
*/
let node4Options={
imgArr:imgArr,
direction:'vertical',
autoPlay:false,//是否自动播放
activeClass:'green',//自定义active的样式
};
/**
* 垂直自动播放方式[auto vertical swipe]
*/
var node5Options={
imgArr:imgArr,
direction:'vertical',
autoPlay:true,//是否自动播放
loop:true,
activeClass:'purple',//自定义active的样式
};
return (
请手动左右滑动
自动循环左右滑动
请手动上下滑动
自动循环上下滑动
)
}
}
render(,document.getElementById('root'))
```