小程序taro 实现轮播图

创建一个文件夹MySwiper，再创建index.js和index.scss文件

index.js

/**
 * 轮播图组件
 */
import React from 'react'
import { Swiper, SwiperItem, Image } from '@tarojs/components';
import './index.scss';
import { View } from '@tarojs/components'

const MySwiper = props => {
    const { banner } = props;

    return (
        <View>
            <Swiper
                className="swiper-container"
                circular
                indicatorDots
                indicatorColor='#999'
                indicatorActiveColor='#bf708f'
                autoplay>
                {
                    banner && banner.map((item, index) => (
                        <SwiperItem key={index}>
                            <Image className="swiper-img" src={`../../assets/${item}.jpg`} mode='widthFix'></Image>
                        </SwiperItem>
                    ))
                }


            </Swiper>
        </View>
    )
}

export default MySwiper

index.scss

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

使用
import MySwiper from ‘…/MySwiper’

import React, { useEffect, useState } from 'react'
import { View,} from '@tarojs/components'
import MySwiper from '../../components/MySwiper'

const Index = props => {
    const [banner, setBanner] = useState()

    useEffect(() => {
        setBanner(['m1', 'm2', 'm3'])
    }, [])

    return (
        <View>
            <MySwiper banner={banner} />
        </View>
    )
}

export default Index

完成