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 (
      
        { banner.map((item, index) => (
          
            
          
        ))}
      
    )
  }
}

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 (
    
      
    
  )
}

3.效果图