taro-material/weapp/Carousel/index.js

Mini Program components that implement Google's Material Design.

import Taro, { Component } from '@tarojs/taro';
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;