taro 自定义 轮播图组件

1.代码

components/MySwiper/index.js

/**
 * 轮播图组件
 */
import Taro, { Component } from '@tarojs/taro';
import { Swiper, SwiperItem, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import './index.scss';

export default class MySwiper extends Component {
  static propTypes = {
    banner: PropTypes.array,
  };

  static defaultProps = {
    banner: [],
  };

  render() {
    const { banner } = this.props;
    return (
      <Swiper
        className="swiper-container"
        circular
        indicatorDots
        indicatorColor='#999'
        indicatorActiveColor='#bf708f'
        autoplay>
        { banner.map((item, index) => (
          <SwiperItem key={index}>
            <Image className="swiper-img" mode="widthFix" src={item.image_src}></Image>
          </SwiperItem>
        ))}
      </Swiper>
    )
  }
}

components/MySwiper/index.less

@import "../../styles/mixin";

.swiper-container {
  width: 100vw;
  height: 450px;
  .swiper-img,img {
    height: 450px!important;
  }
}

2.调用

render() {
  const { banner } = this.props;
  return (
    <View className="home-page">
      <MySwiper banner={banner} />
    </View>
  )
}

3.效果图