taro-material/h5/Carousel/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro, { Component } from "@tarojs/taro-h5";
import PropTypes from 'prop-types';
import { Swiper, SwiperItem, Image } from '@tarojs/components';

import theme from "../styles/theme";

import './index.scss';

class RMCarousel extends Component {
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  handleChange(e) {
    const { onChange } = this.props;
    onChange && onChange(...arguments);
  }

  handleClick(e, item, index) {
    const { onClick } = this.props;
    onClick && onClick(...arguments);
  }

  render() {
    const {
      items = [],
      speed,
      delay,
      autoplay,
      dots,
      vertical,
      multipleItems,
      current,
      customStyle
    } = this.props;

    const style = {
      height: '100%',
      ...customStyle
    };

    return <Swiper className="carousel" indicatorColor={theme.palette.grey['300']} indicatorActiveColor={theme.palette.primary.main} vertical={vertical} skipHiddenItemLayout displayMultipleItems={multipleItems} circular indicatorDots={dots} interval={delay} duration={speed} autoplay={autoplay} current={current} onChange={this.handleChange} style={style}>
        {items.length > 0 && items.map((item, index) => <SwiperItem key={item.id || item.src} className="item" onClick={this.handleClick.bind(this, item, index)}>
              <Image className="image" src={item.src} mode="aspectFill" />
            </SwiperItem>)}

        {this.props.children}
      </Swiper>;
  }
}

RMCarousel.propTypes = {
  /**
   * item list
   * eg.
   *  [{
   *    src: '/static/images/grid-list/bike.jpg',
   *    alt: 'images-1',
   *  },
   *  {
   *    src: '/static/images/grid-list/mushroom.jpg',
   *    alt: 'images-2',
   *  },
   *  {
   *    src: '/static/images/grid-list/burgers.jpg',
   *    alt: 'images-3',
   *  }]
   */
  items: PropTypes.array.isRequired,
  /**
   * speed of pictrue slide，unit second
   */
  speed: PropTypes.number,
  /**
   * delay of pictrue slide，unit second
   */
  delay: PropTypes.number,
  /**
   * autoplay
   */
  autoplay: PropTypes.bool,
  /**
   * is dots showed
   */
  dots: PropTypes.bool,
  /**
   * 滑动方向是否为纵向
   */
  vertical: PropTypes.bool,
  /**
   * 同时显示的滑块数量
   */
  multipleItems: PropTypes.number,
  /**
   * 当前所在滑块的 index
   */
  current: PropTypes.number,
  /**
   * current 改变时会触发 change 事件
   */
  onChange: PropTypes.func,
  onClick: PropTypes.func,

  customStyle: PropTypes.object
};

RMCarousel.defaultProps = {
  items: [],
  speed: 500,
  delay: 5000,
  autoplay: false,
  dots: true,
  vertical: false,
  multipleItems: 1,
  current: 0,
  customStyle: {},
  onChange: () => {},
  onClick: () => {}
};

export default RMCarousel;