taro 自定义 轮播图组件

1.代码

components/MySwiper/index.js

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/**  * 轮播图组件  */ 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

+ View Code?

1 2 3 4 5 6 7 8 9

@import "../../styles/mixin";   .swiper-container {   width: 100vw;   height: 450px;   .swiper-img,img {     height: 450px!important;   } }

2.调用

?

1 2 3 4 5 6 7 8

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

3.效果图