import Taro, { Component } from '@tarojs/taro'; import { Swiper, SwiperItem, Image, View } from '@tarojs/components'; import PropTypes from 'prop-types'; import './MySlider.scss'; export default class MySlider extends Component { static propTypes = { banner: PropTypes.array, }; static defaultProps = { banner: [], }; state = { current: 0 } swiperChange = (e) => { this.setState({ current: e.detail.current }) } render() { const { banner } = this.props; const { current } = this.state; return ( <View className='wrapper'> <Swiper className='swiper-container' circular autoplay onChange={ this.swiperChange } current={ current } > { banner.map((item, index) => ( <SwiperItem key={index}> <Image className='swiper-img' mode='widthFix' src={item.src}></Image> </SwiperItem> ))} </Swiper> <View className='pageState'>{current + 1}/{ banner.length }</View> </View> ) } }
需要同时在组件上绑定current属性。