走马灯包含Carousel、CarouselItem、CarouselLocat三个组件。
Carousel就能满足。CarouselItem进行自定义单个条目。CarouselLocat 组件用来坐标点容器，展示当前播放页数以及总页面数量。import { Page, Carousel, CarouselItem, CarouselLocat } from "@qnpm/yis/components";
import { PageCore } from "@qnpm/yis";
import styles from "./main.css";
import classnames from 'classnames';
const data = [
"https://gw.alicdn.com/imgextra/i1/156/TB2k2dqCMaTBuNjSszfXXXgfpXa_!!156-0-lubanu.jpg",
// ...
].map(item => ({
url: item,
href: ''
}));
export default class CarouselDemo extends PageCore {
state = {
data,
carousel: 2,
};
carouselChange = (number) => {
this.setState({
carousel: number
});
}
render(){
return (
<Page>
<Carousel
ref={(dom)=>{this.carousel = dom}}
className={styles.carousel_root}
onChange = {this.carouselChange}
initPage={0}
data={this.state.data}
autoPlay={false}
loop={false}
time={1500}
/>
</Page>
)
}
}
const data = [
"https://gw.alicdn.com/imgextra/i4/170/TB2wyLZCntYBeNjy1XdXXXXyVXa_!!170-0-lubanu.jpg",
// ...
].map(item => ({
url: item,
href: ''
}));
export default class CarouselDemo extends PageCore {
state = {
showModal: false,
lastViewImgage: 0,
};
carouselChange = (number) => {
console.log('changeImageView', number);
this.setState({
lastViewImgage: number
})
}
render() {
return (
<Page>
<Button
onTouchTap={() => {
this.setState({
showModal: true
})
}}
// ...
/>
<Modal
displayState={this.state.showModal}
fixBody={true}
onTouchMask={() => {
this.setState({
showModal: false
})
}}>
<Animate
className={styles.image_view_ani}
on={this.state.showModal}
>
<Carousel
onChange={this.carouselChange}
//...
>
{
data.map(item => (
<CarouselItem
data={item}
onTouchTap={(item) => {
console.log(item);
}}
className={styles.carousel_item} />
))
}
</Carousel>
</Animate>
</Modal>
</Page>
)
}
}
说明事项
CarouselItem继承了View组件 接收 data, className 两个属性和 onTouchTap 回调函数
export default class CarouselDemo extends PageCore {
state = {
carousel: 0
};
carouselChange = (number) => {
console.log('changeImageView', number);
this.setState({
carousel: number
})
}
render() {
return (
<Page>
<Carousel
onChange={this.carouselChange}
autoPlay={true}
initPage={0}
loop={true}
time={3000}
>
{
data.map((item, index) => (
<CarouselItem className={index === this.state.carousel ? 'target' : null}>
<img src={item.url} />
</CarouselItem>
))
}
<CarouselLocat className={styles.carousel_locat}>
{
data.map((item, index) =>
<div className={classnames(styles.carousle_locat_item, {
'on': index === this.state.carousel
})}>
</div>)
}
</CarouselLocat>
</Carousel>
</Page>
)
}
}
说明事项
CarouselLocat继承YISComponent组件。
<Carousel
className={styles.vertical}
isVertical
initPage={0}
loop={true}
autoPlay={true}
preventTouch={true}
>
{
infos.map((item,index) =>
<CarouselItem key={index}>{item}</CarouselItem>
)
}
</Carousel>
<Carousel
className={styles.stage}
ref={(dom)=>{this.gallery = dom;}}
autoPlay={false}
initPage={0}
loop={true}
fakeNode={2}
unit={158}
onChange={(number) => {
// ...
}}
>
{
this.state.data.map((item, index) => (
<CarouselItem
// ...
>
</CarouselItem>
))
}
</Carousel>
<Carousel
onChange={this.carouselChange}
ref={(dom) => { this.Instance = dom }}
// ...
>
{
data.map((item, index) => (
<CarouselItem
className={index === this.state.carousel ? 'target' : null}
>
<img src={item.url} />
</CarouselItem>
))
}
</Carousel>
<Button tag='div'
label="开始自动切换"
onTouchTap={() => {
this.Instance.play();
}}
// ...
/>
<Button tag='div'
label="停止自动切换"
onTouchTap={() => {
this.Instance.stop();
}}
/>
<Button tag='div'
label="切换到第4屏"
onTouchTap={() => {
this.Instance.arrive(3, false);
}} />
说明事项
Instance.arrive(页数, 不带动画[ true|false ]);
| 参数名 | 类型 | 必选 | 默认值 | 描述 |
|---|---|---|---|---|
| data | array | x | 无 | 数据源 |
| className | string | × | 无 | 根节点附加类名 |
| initPage | number | × | 0 | 到达的页数 |
| autoPlay | boolean | × | true | 是否自动换页 |
| loop | boolean | × | true | 是否循环 |
| time | number | × | 1000 | 自动播放时动画间隔，单位为ms |
| onChange | function | × | 无 | 页面切换后提供的回调函数 |
| isVertical | boolean | × | false | 是否支持纵向滑动 |
| unit | number | × | 单个条目的宽度 | 滚动的距离 |
| offset 1.3.0 104 | number | × | 0 | 单个条目的偏移量 |
| fakeNode 1.3.0 104 | number | × | 1 | 开始或结尾复制的假节点数 |
| preventTouch 1.3.0 104 | boolean | × | false | 是否阻止滑动手势 |
| 方法名 | 参数 | 描述 |
|---|---|---|
| play | x | Carousel实例的静态方法，开始播放 |
| stop | x | Carousel实例的静态方法，停止播放 |
| arrive | number | Carousel实例的静态方法，切换页面，参数为指定页码索引值 |